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"