近期项目导航栏有个地方是使用document.body.scrollHeight 来计算高度,发现我浏览器计算高度没有问题,而同事都有问题(PS:以前我们浏览器都没问题的)。比较了差异,我的谷歌浏览器是55.0的,同事都是66.0的,可能是浏览器版本问题,后来用方法解决了,所以现在记录下来
先了解下面的内容,再说解决问题
浏览器所有内容高度: 浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和。
浏览器滚动部分高度: 滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
适配3wschool,即DTD声明了
IE浏览器
document.documentElement.scrollHeight——浏览器所有内容高度
document.body.clientHeight——浏览器所有内容高度
火狐浏览器firefox
document.documentElement.scrollHeight——浏览器所有内容高度
Chrome谷歌浏览器
document.documentElement.scrollHeight——浏览器所有内容高度
document.body.clientHeight——浏览器所有内容高度
——————————————————————————————————————————————
分割线---------------------------------------------------
——-----------------------------------------------------------------------------------------
未完全适配3wschool,即DTD声明了
IE浏览器
document.documentElement.scrollHeight——浏览器可视部分高度
document.body.clientHeight——浏览器可视部分高度
火狐浏览器firefox
document.documentElement.scrollHeight——浏览器可视部分高度
document.body.clientHeight——浏览器可视部分高度
Chrome谷歌浏览器
document.documentElement.scrollHeight——浏览器可视部分高度
document.body.clientHeight——浏览器可视部分高度
从上面的情况可以得出
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body
PS:可以使用 document.compatMode 可以用来判断是否声明了DTD,得值进行判断。
我们则没有使用document.compatMode来判断,而是直接
var bodyHeight=document.body.scrollHeight==0?document.documentElement.scrollHeight:document.body.scrollHeight;
var height = bodyHeight -70;