关于Chrome谷歌浏览器版本更新对 document.body.scrollHeight 等 兼容日常小记

近期项目导航栏有个地方是使用document.body.scrollHeight  来计算高度，发现我浏览器计算高度没有问题，而同事都有问题（PS:以前我们浏览器都没问题的）。比较了差异，我的谷歌浏览器是55.0的，同事都是66.0的，可能是浏览器版本问题，后来用方法解决了，所以现在记录下来

先了解下面的内容，再说解决问题

浏览器所有内容高度：  浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和。

浏览器滚动部分高度：   滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

适配3wschool,即DTD声明了

IE浏览器

document.documentElement.scrollHeight——浏览器所有内容高度

document.body.scrollHeight—— 浏览器所有内容高度

document.documentElement.scrollTop——浏览器滚动部分高度

document.body.scrollTop—— 始终为0

document.documentElement.clientHeight——浏览器可视部分高度

document.body.clientHeight——浏览器所有内容高度

火狐浏览器firefox

document.documentElement.scrollHeight——浏览器所有内容高度 

document.body.scrollHeight—— 浏览器所有内容高度

document.documentElement.scrollTop——浏览器滚动部分高度

document.body.scrollTop—— 始终为0

document.documentElement.clientHeight—— 浏览器可视部分高度

document.body.clientHeight——浏览器所有内容高度

Chrome谷歌浏览器

document.documentElement.scrollHeight——浏览器所有内容高度 

document.body.scrollHeight—— 浏览器所有内容高度

document.documentElement.scrollTop—— 始终为0

document.body.scrollTop—— 浏览器滚动部分高度

document.documentElement.clientHeight——浏览器可视部分高度

document.body.clientHeight——浏览器所有内容高度

——————————————————————————————————————————————

分割线---------------------------------------------------

——-----------------------------------------------------------------------------------------

未完全适配3wschool,即DTD声明了

IE浏览器

document.documentElement.scrollHeight——浏览器可视部分高度

document.body.scrollHeight—— 浏览器所有内容高度 

document.documentElement.scrollTop—— 始终为0

document.body.scrollTop—— 浏览器滚动部分高度

document.documentElement.clientHeight—— 始终为0

document.body.clientHeight——浏览器可视部分高度

火狐浏览器firefox

document.documentElement.scrollHeight——浏览器可视部分高度 

document.body.scrollHeight—— 浏览器所有内容高度

document.documentElement.scrollTop—— 始终为0

document.body.scrollTop—— 浏览器滚动部分高度

document.documentElement.clientHeight——浏览器所有内容高度

document.body.clientHeight——浏览器可视部分高度

Chrome谷歌浏览器

document.documentElement.scrollHeight——浏览器可视部分高度

document.body.scrollHeight—— 浏览器所有内容高度

document.documentElement.scrollTop—— 始终为0

document.body.scrollTop—— 浏览器滚动部分高度

document.documentElement.clientHeight—— 浏览器所有内容高度

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;