IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

时间 2019-11-17

标签 chrome document.documentelement document documentelement document.body body scrollheight scrolltop clientheight 栏目 Chrome 繁體版

原文原文链接

DTD已声明
IE
document.documentElement.scrollHeight 浏览器全部内容高度 ,document.body.scrollHeight 浏览器全部内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器全部内容高度浏览器

FF
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 浏览器全部内容高度spa

DTD未声明
IE
document.documentElement.scrollHeight 浏览器可视部分高度，document.body.scrollHeight 浏览器全部内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度对象

FF
document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器全部内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器全部内容高度，document.body.clientHeight 浏览器可视部分高度string

Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器全部内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器全部内容高度，document.body.clientHeight 浏览器可视部分高度class

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

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

综上scroll

一、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，因此能够用这两个的和来求scrollTopco

二、scrollHeight、clientHeight 在DTD已声明的状况下用documentElement，未声明的状况下用body

document.compatMode 能够用来判断是否声明了DTD，值为"BackCompat"：未声明，值为"CSS1Compat"