关于Chrome谷歌浏览器版本更新对 document.body.scrollHeight 等兼容日常小记_爱码仁识的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

适配3wschool,即DTD声明了

IE浏览器

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

document.body.scrollHeight—— 浏览器所有内容高度 document.documentElement.scrollTop——浏览器滚动部分高度

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

火狐浏览器 firefox

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

document.body.scrollHeight—— 浏览器所有内容高度 document.documentElement.scrollTop——浏览器滚动部分高度

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

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

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

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

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

IE浏览器

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

document.body.scrollHeight—— 浏览器所有内容高度 document.documentElement.scrollTop—— 始终为 0

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

火狐浏览器 firefox

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

document.body.scrollHeight—— 浏览器所有内容高度 document.documentElement.scrollTop—— 始终为 0

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

Chrome谷歌浏览器

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

document.body.scrollHeight—— 浏览器所有内容高度 document.documentElement.scrollTop—— 始终为 0

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;

近期项目导航栏有个地方是使用document.body.scrollHeight 来计算高度，发现我浏览器计算高度没有问题，而同事都有问题（PS:以前我们浏览器都没问题的）。比较了差异，我的谷歌浏览器是55.0的，同事都是66.0的，可能是浏览器版本问题，后来用方法解决了，所以现在记录下来先了解下面的内容，再说解决问题浏览器所有内容高度：浏览器整个框架的高度，包括滚动条卷去部 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offset Height 指 obj 控件自身的高度，整型，单位像...

DTD已声明 document . document Element. scroll Height 浏览器所有内容高度 , document . body . scroll Height 浏览器所有内容高度 document . document Element. scroll Top 浏览器滚动部分高度， document . body . scroll Top 始终为0 document . document Element.client Height 浏览器可视部分高度， document . body .client Height 浏览器所有内容高度 document . document Element. scroll Height 浏览器所

最近在慕课网上复习基础知识，在做到 scroll Height 时出现了问题， chrome 解析结果与其他各浏览器不一致，主要测试了IE6~IE9,IE11,ff, chrome 。不一致主要体现在 document . document Element. scroll Height 和 document . body . scroll Height 上，测试结果我使用了一个表格来说明由此可见， chrome 在处理 scroll Hei

window.screen. height => 这个好理解，不多说。 2获取浏览器可视窗口高度（PC端） document . document Element.client Height => 就是网页在浏览器中可见高度，不包括浏览器自身的状态栏，随着浏览器大小变化； 3获取网...