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

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

 

小测头图

一、题目与考察点

题目如下(纸质打印拍摄图):

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.documentElementdocument.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.documentElementdocument.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,我拉你们进去,备注“入群”,然后附上你们的姓名,方便我备注。

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

二乃的胸部

(本篇完)

分享到:1


发表评论(目前4 条评论)

  1. 说道:

    文章里的 节流函数 是 防抖函数 的实现

  2. 三江古月说道:

    刚看完 , 就飙车

  3. 墨轩momo说道:

    document.documentElement 其实就是 document.querySelector(‘html’)

  4. 说道:

    好想逢胸啊