监听页面滚动事件
window.onscroll
window.addEventListener('scroll', function () { //函数体 })
获取页面滚动高度
document.documentElement.scrollTop 在桌面端可用,在移动端值一直为0
document.body.scrollTop 在移动端可用,在桌面端一直为0
说明移动端滚动的元素是 document.body ,在桌面端滚动的元素是 document.documentElement。滚动的元素不一致
window.pageYOffset 兼容性较好(IE9+),桌面端与移动端都支持。是可读属性,不可设置
document.scrollingElement.scrollTop 为新属性,直接动态识别滚动容器。在桌面端就是document.documentElement,在移动端就指document.body。还没有在实际项目中用过,安卓5以上支持,以后可以试试。
总结:获取页面滚动高度的比较好的方式为
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;