粉丝群DOM小测第27期直播答疑文字版

时间 2019-12-05

标签粉丝 dom 直播答疑文字栏目 HTML 繁體版

原文原文链接

原文地址：www.zhangxinxu.com/wordpress/?…html

1、题目与考察点

题目以下（纸质打印拍摄图）：git

是至关简单的一道题目，入门级别的，虽然挺简单，但还有不少细节是不少人不知道的，所以仍是颇有价值的。github

本题主要考察窗体滚动，窗体高度获取，普通元素高度获取这几个知识点。浏览器

本次B站直播在上午月10:15分开始，持续约40分钟，有录播，戳这里浏览。安全

2、答疑内容

你们回答地址这里：github.com/zhangxinxu/…bash

1. 关于节流函数

有很多人答题时候使用了节流函数，以下：微信

初衷是好的，滚动是一个高频触发的操做，经过节流函数能够下降计算方法执行的频率。可是，实际上，咱们开发的大多数页面是如此的简单，根本用不到须要节流函数，反而增长了代码的复杂度，对于本题，能够不须要。
dom

2. 窗体滚动事件绑在哪里？

浏览器窗体滚动事件绑在哪一个对象上呢？是window对象，仍是document对象，或者是document.documentElement，document.body？ide

咱们不妨测试下：wordpress

window.addEventListener('scroll', function () {
    console.log('window滚动触发，window.pageYOffset是：' + this.pageYOffset);
});
document.addEventListener('scroll', function () {
    console.log('document滚动触发，document.scrollTop是：' + this.scrollTop);
});
document.documentElement.addEventListener('scroll', function () {
    console.log('document.documentElement滚动触发，document.documentElement.scrollTop是：' + this.scrollTop);
});
document.body.addEventListener('scroll', function () {
    console.log('document.body滚动触发，document.body.scrollTop是：' + this.scrollTop);
});复制代码

您能够识别此二维码：

或者直接点击这个页面：scroll滚动容器测试demo

结果不管是PC，仍是移动端，测试结果以下：

也就是window对象和document对象绑定scroll事件能够触发，document.documentElement和document.body是不行的。

而后，直播的时候有人在群里反馈，本身的手机document滚动没法触发，若是这是真的，那安全起见，默认的浏览器窗体滚动事件仍是绑定在window对象上。

3. 窗体的滚动高度获取

如何获取窗体的滚动高度呢？常见的有下面3种代码：

window.pageYOffset;
document.documentElement.scrollTop;
document.body.scrollTop;复制代码

都是有效的吗？

咱们不妨测试下，想办法识别此二维码：

或者直接访问这个页面：3种窗体滚动高度获取方法测试demo

结果在PC上是这样：

而在手机上则是：

能够看到桌面浏览器和移动端浏览器对于滚动高度获取是有差异的，桌面端浏览器不能使用document.body.scrollTop获取浏览器窗体的滚动高度，而移动端不能使用document.documentElement.scrollTop获取浏览器窗体的滚动高度。可是都支持window.pageYOffset。

因此，理论上讲，浏览器窗体的滚动高度获取使用window.pageYOffset便可，然而window.pageYOffset有一个缺点，就是IE9及其以上浏览器才支持，在PC端，不少项目是须要兼容IE8浏览器的，所以，对于传统PC网站，获取浏览器窗体滚动高度比较好的表达方法是这样：

var winScrollTop = window.pageYOffset || document.documentElement.scrollTop;复制代码

3. 浏览器窗体高度获取

这个可使用window.innerHeight获取。然而，window.innerHeight有兼容性问题，IE8浏览器及其如下浏览器是不支持的，怎么办？能够借助document.documentElement.clientHeight获取。

因而：
pre>var winHeight = window.innerHeight || document.documentElement.clientHeight;

document.documentElement是个很特殊的对象，他的不少行为表现跟普通元素是不同的。例如，普通div这类元素的clientHeight是不包括边框大小的，可是，document.documentElement.clientHeight直接无视这些，不管你<html>元素是否设置了border，都是页面可视区域的高度。更神奇的是document.documentElement.offsetHeight竟然是包含浏览器滚动高度的完整高度，等同于document.documentElement.scrollHeight，你们能够特殊记忆下。

4. 普通元素的滚动和高度获取

普通元素的滚动直接添加scroll事件就行了，没有任何兼容性差别。

dom.addEventListener('scroll', function () {
    console.log('元素滚动触发，滚动高度是：' + this.scrollTop);
});复制代码

高度获取则使用clientHeight，由于滚动的内容是不包括border-box的：

dom.addEventListener('scroll', function () {
    if (this.scrollTop > this.clientHeight) {
        console.log('滚动超过一屏了');
    }
});复制代码

对于普通元素的滚动高度获取，还有不少其余的原生API，例如offsetHeight，包含border边框大小；scrollHeight包括滚动高度；getBoundingClientRect().height也是高度获取，不会能够是小数，特殊场景挺有用的。

3、答题核心概要总结

窗体滚动使用window.addEventListener，document有人反馈不反应；
窗体滚动滚动高度获取：window.pageYoffset(IE9+)，
document.documentElement.scrollTop(PC)，document.body.scrollTop(Mobile)；
普通元素直接scrollTop；
窗体高度获取：window.innerHeight(IE9+)，
备选方法为：document.documentElement.clientHeight；
普通元素高度获取：本题滚动事件中使用clientHeight（不含边框，滚动是在border-box里面的），
offsetHeight包含边框，可是是整数；
getBoundingClientRect().height也包含边框，但是是小数。（全部这几个高度相关API都兼容IE6+）

重要参考文档

本文提到的pageYoffset，innerHeight，clientHeight，offsetHeight，getBoundingClientRect等原生API都属于CSSOM视图模式(CSSOM View Module)相关内容，本文这里只是一部分，更多内容能够参见本站经典文章：“CSSOM视图模式(CSSOM View Module)相关整理”。

下次直播预告

下周三群里发布CSS小测第2期正常，可是因为周六上班，有恰逢春节，所以直播答疑推迟到年后。想加入个人粉丝群的能够加我微信好友 zhangxinxu-job，我拉大家进去，备注“入群”，而后附上大家的姓名，方便我备注。

（完）