不同浏览器获取网页滚动距离的方法不同
浏览器在渲染网页的时候有两种模式：“标准模式（CSS1Compat）”、“混杂模式/怪异模式（BackCompat）”
默认情况下都是以标准模式来渲染的，
如果网页没有书写文档声明就会按照”混杂模式/怪异模式“来进行渲染
- 文档声明：
<!DOCTYPE html>
1.IE9以及IE9以上的浏览器
window.pageXOffset;//水平方向
window.pageYOffset;//垂直方向
2.标准模式下浏览器
document.documentElement.scrollTop;//垂直方向
document.documentElement.scrollLeft;//水平方向
3.混杂（怪异）模式下浏览器
document.body.scrollTop;//垂直方向
document.body.scrollLeft;//水平方向
4.解决网页滚动的距离的兼容问题：将网页滚动的距离封装成方法
<script>
window.onscroll = function () {//鼠标的滚动事件
let{x, y} = getPageScroll();//对象的解构赋值——ES6新增
console.log(x, y);//答应水平与垂直方向的滚动距离
function getPageScroll() {//获取网页滚动距离的方法
let x, y;
if (window.pageXOffset){//查看有无pageXOffset属性：IE9以及IE9以上的浏览器
x = window.pageXOffset;
y = window.pageYOffset;
}else if (document.compatMode == "BackCompat"){//混杂（怪异）模式下浏览器
x = document.body.scrollLeft;
y = document.body.scrollTop;
}else {//标准模式下浏览器
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return {//返回水平距离、垂直距离
x:x,
y: y
}
}
}
</script>