IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判斷滾動條是否已拉到頁面最底部


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  瀏覽器所有內容高度


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 瀏覽器可視部分高度


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

這里之前有誤, document.compatMode 可以用來判斷是否聲明了DTD, 值為"BackCompat":未聲明,值為"CSS1Compat":已聲明。

所以,判斷滾動條是否已拉到頁面最底部,可以用如下代碼

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        
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM