DOM基础小测27期答疑文字版-窗体滚动二三事

这篇文章发布于 2019年01月26日，星期六，22:01，归类于 JS API。阅读 19166 次, 今日 2 次 4 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8425
本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、题目与考察点

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

DOM小测题目

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

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

本次B站直播在上午月10:15分开始，持续约40分钟，有录播，可以直接下面浏览。

二、答疑内容

大家回答地址这里：https://github.com/zhangxinxu/quiz/issues/4

1. 关于节流函数

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

function Throttle(fn, delay) {
  let last = 0,
  timer = null;
  return function() {
    let context = this,
    args = arguments,
    now = +new Date();
    if (now - last < delay) {
      clearTimeout(timer)
      timer = setTimeout(function() {
         last = now;
         fn.apply(context, args);
      }, delay)
    } else {
      last = now;
     fn.apply(context, args);
    }
  }
}

代码高亮版本见下图：

节流函数代码截图

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

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

三、答题核心概要总结

窗体滚动使用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，我拉你们进去，备注“入群”，然后附上你们的姓名，方便我备注。

最后，祝广大学友新年快乐，逢胸化吉。

二乃的胸部

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8425

（本篇完）

CSSOM视图模式(CSSOM View Module)相关整理 (0.588)
小tip: 子元素scroll父元素容器不跟随滚动JS实现 (0.189)
还算有点用的scrollTo和scrollBy两个JS API (0.187)
小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现 (0.168)
使用document.scrollingElement控制窗体滚动高度 (0.140)
DOM小测28期 - DOM节点文档前后位置判断 (0.121)
JS滚轮事件(mousewheel/DOMMouseScroll)了解 (0.105)
粉丝群第1期CSS小测点评与答疑 (0.105)
粉丝群第27期JS基础小测答疑文字版 (0.105)
来了来了，scrollend滚动停止事件也支持了 (0.105)
翻译：让网络更快一些——最小化浏览器中的回流(reflow) (RANDOM - 0.016)