JS_获取当前页面的滚动条位置的兼容

方法一

const getScrollPosition = (el = window) => ({ 
    x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, 
    y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop 
}); 
getScrollPosition(); // {x: 0, y: 200}

方法二

获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。*

1.各浏览器下 scrollTop的差异:

IE6/7/8：

可以使用document.documentElement.scrollTop；

IE9及以上：

可以使用window.pageYOffset或者document.documentElement.scrollTop

Safari:

safari：window.pageYOffset与document.body.scrollTop都可以；

Firefox:

火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者document.documentElement.scrollTop ；

Chrome：

谷歌浏览器只认识document.body.scrollTop;

2.获取scrollTop的值

可以使用window.pageYoffset

Window pageXOffset和pageYOffset属性

其定义：pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

注意：IE 8 及 更早 IE 版本不支持该属性,但可以使用 “document.documentElement.scrollLeft” 和 “document.documentElement.scrollTop” 属性 。

由于谷歌兼容问题，可以使用document.body.scrollLeft和document.body.scrollTop或者window.pageXoffset与window.pageYoffset。

3. scrollTOp 兼容性的写法

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

js获取视口高度，滚动高度，文档高度==>传送门