scroll家族方法
1、 onscroll —— 当元素的滚动条滚动时触发的事件
onscroll事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。
用法：element.onscroll=function(){};
2、scrollTop —— 元素滚动条内的顶部隐藏部分的高度。
scrollTop属性只有DOM元素才有，window/document没有。
用法1：获取值 var top = element.scrollTop;//返回数字，单位像素
用法2：设置值 element.scrollTop = 200;
3、scrollHeight —— 元素滚动条内的内容高度。
- scrollHeight同scrollTop属性一样，只有DOM元素才有，window/document没有。
- 不同的是scrollHeight是只读，不可设置。
此外还有scrollLeft（网页左边被卷去的内容），scrollWidth(网页正文全文宽)，道理是一样的。
-
实际开发中scrollTop使用较多：
scroll.png
处理scroll家族浏览器适配问题：
- ie9+和最新浏览器
window.pageXOffset; (scrollLeft)
window.pageYOffset; (scrollTop)
- Firefox浏览器和其他浏览器
document.documentElement.scrollTop;
- Chrome浏览器和没有声明DTD<DOCTYPE>
document.body.scrollTop;
- 为了兼容所有浏览器可以对调用方式进行封装或者采用兼容写法( || )
/**
* 获取滚动的头部距离和左边距离
* scroll().top scroll().left
* @returns {*}
*/
function scroll() {
if(window.pageYOffset !== null){
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode === "CSS1Compat"){ // W3C
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
其他scroll相关方法还有window.scroll()，window.scrollBy()，window.scrollTo()，基本上都是对指定位置的滚动，详情可自行了解
参考：
网易云js课程
