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

张鑫旭
2,028 阅读4分钟

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

一、题目与考察点

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

DOM小测题目

是相当简单的一道题目，入门级别的，虽然挺简单，但还有很多细节是很多人不知道的，因此还是很有价值的。

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

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

二、答疑内容

大家回答地址这里：github.com/zhangxinxu/…

1. 关于节流函数

有不少人答题时候使用了节流函数，如下：

节流函数代码截图

初衷是好的，滚动是一个高频触发的操作，通过节流函数可以降低计算方法执行的频率。但是，实际上，我们开发的大多数页面是如此的简单，根本用不到需要节流函数，反而增加了代码的复杂度，对于本题，可以不需要。

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

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

我们不妨测试下：

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上是这样：

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也是高度获取，不会可以是小数，特殊场景挺有用的。

三、答题核心概要总结

  1. 窗体滚动使用window.addEventListener，document有人反馈不反应；
  2. 窗体滚动滚动高度获取：window.pageYoffset(IE9+)，
    document.documentElement.scrollTop(PC)，document.body.scrollTop(Mobile)；
  3. 普通元素直接scrollTop；
  4. 窗体高度获取：window.innerHeight(IE9+)，
    备选方法为：document.documentElement.clientHeight；
  5. 普通元素高度获取：本题滚动事件中使用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，我拉你们进去，备注“入群”，然后附上你们的姓名，方便我备注。

（完）


avatar
文章
阅读
粉丝