原生js窗口滚动相关知识点（持续更新）

平时项目经常会用js写滚动相关的交互效果，因此在这里做个总结

知识点1：滚动监听

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

经过测试，window对象和document对象绑定scroll事件可以触发（据说有的手机document滚动无法触发，如果这是真的，那安全起见，默认的浏览器窗体滚动事件还是绑定在window对象上。）

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

知识点2：卷曲高度获取

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

window.pageYOffset; // PC和移动端都支持，但IE8以下不支持
document.documentElement.scrollTop; // 支持PC和IE，但不支持移动端
document.body.scrollTop; // 支持移动端，但不支持PC

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

var winScrollTop = window.pageYOffset || document.documentElement.scrollTop;

2. dom元素
   直接使用dom.scrollTop，没有任何兼容性问题

知识点3：高度获取

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

var winHeight = window.innerHeight || document.documentElement.clientHeight;

2. dom元素高度的获取
   高度获取则使用clientHeight，因为滚动的内容是不包括border-box的：

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

知识点4：dom元素的位置

obj.offsetTop指 obj 距离上方或上层控件的位置，整型，单位像素。

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.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+）

文档参考
张鑫旭 - 窗体滚动二三事