前言
在开发中, 兼容性问题是最常见的, 今天就来介绍一下关于获取滚动条高度的兼容性写法, 宽度同理, 我在这里就不一一解释了
各浏览器的写法
- IE6/7/8
- document.documentElement.scrollTop
IE9 以上
window.pageYOffset 或者 document.documentElement.scrollTop
Safari
window.pageYOffset 与 document.body.scrollTop
Firefox
window.pageYOffset 或者 document.documentElement.scrollTop
- Chrome
- document.body.scrollTop
具体的写法
通过上面列出的主流浏览器的兼容性, 其实我们不难看出, 其实只要我们判断到 document.body.scrollTop 和 document.documentElement.scrollTop 就会包括上面所有的浏览器; 故最终的写法
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- console.log(scrollTop);
如果需要监听滚动条, 那么就监听 onscroll 事件即可; 如
- document.body.onscroll = function(){
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- console.log(scrollTop);
- }
来源: https://blog.csdn.net/wxl1555/article/details/79733930