document.body.scrollTop的值总为零的解决办法 February 13, 2019 # document.body.scrollTop的值总为零的解决办法 ### 1、document.body.scrollTop的值总为零的原因 有一个功能需要判断下拉的距离,设置头部固定导航栏的颜色。 代码如下: ```html Document ``` 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scrollTop。 页面没有DTD,即没指定DOCTYPE时,使用document.body.scrollTop。 ### 2、各浏览器下 scrollTop的差异 **IE:** 对于没有doctype声明的页面,使用 document.body.scrollTop 或 document.documentElement.scrollTop; 对于有doctype声明的页面,则使用 document.documentElement.scrollTop; **Chrome、Firefox:** 对于没有doctype声明的页面,使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面,则使用 document.documentElement.scrollTop; **Safari:** safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ; ### 3、解决办法 因此,为了兼容所有浏览器,封装一个函数,去获取页面向上卷曲出去的距离和向左卷曲出去的距离 ```javascript //获得页面向左、向上卷动的距离 function getScroll(){ return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } ``` 因此,js代码如下: ```javascript window.onscroll = function () { //获得页面向左、向上卷动的距离 function getScroll(){ return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } var sTop = getScroll().top; console.log(sTop); if(sTop>100){ document.getElementById("header").style.backgroundColor = '#F59797'; }else{ document.getElementById("header").style.backgroundColor = '#E72C2C'; } }; ```