DTD已聲明
IE
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度 ,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 瀏覽器滾動(dòng)部分高度,document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度,document.body.clientHeight 瀏覽器所有內(nèi)容高度
FF
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度 ,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 瀏覽器滾動(dòng)部分高度,document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度,document.body.clientHeight 瀏覽器所有內(nèi)容高度
Chrome
document.documentElement.scrollHeight 瀏覽器所有內(nèi)容高度, document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0,document.body.scrollTop 瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight 瀏覽器可視部分高度,document.body.clientHeight 瀏覽器所有內(nèi)容高度
DTD未聲明
IE
document.documentElement.scrollHeight 瀏覽器可視部分高度,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0,document.body.scrollTop 瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight 始終為0,document.body.clientHeight 瀏覽器可視部分高度
FF
document.documentElement.scrollHeight 瀏覽器可視部分高度, document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0,document.body.scrollTop 瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight 瀏覽器所有內(nèi)容高度,document.body.clientHeight 瀏覽器可視部分高度
Chrome
document.documentElement.scrollHeight 瀏覽器可視部分高度,document.body.scrollHeight 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop 始終為0,document.body.scrollTop 瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight 瀏覽器所有內(nèi)容高度,document.body.clientHeight 瀏覽器可視部分高度
瀏覽器所有內(nèi)容高度即瀏覽器整個(gè)框架的高度,包括滾動(dòng)條卷去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動(dòng)部分高度即滾動(dòng)條卷去部分高度即可視頂端距離整個(gè)對(duì)象頂端的高度。
綜上
1、document.documentElement.scrollTop和document.body.scrollTop始終有一個(gè)為0,所以可以用這兩個(gè)的和來(lái)求scrollTop
2、scrollHeight、clientHeight 在DTD已聲明的情況下用documentElement,未聲明的情況下用body
這里之前有誤, document.compatMode 可以用來(lái)判斷是否聲明了DTD, 值為"BackCompat":未聲明,值為"CSS1Compat":已聲明。
所以,判斷滾動(dòng)條是否已拉到頁(yè)面最底部,可以用如下代碼
window.onscroll = function (){ var marginBot = 0; if (document.compatMode === "CSS1Compat"){ marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)- document.documentElement.clientHeight; } else { marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight; } if(marginBot<=0) { //do something }}
聯(lián)系客服