scrollHeight、scrollTop、clientHeight瀏覽器相容問題

本章節介紹一下標題中的幾個屬性的相容性問題，需要的朋友可以做一下參考。

DTD已宣告:

IE瀏覽器（準確的說是低版本IE瀏覽器）:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.scrollHeight  瀏覽器所有內容高度 ,document.body.scrollHeight  瀏覽器所有內容高度
document.documentElement.scrollTop  瀏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight  瀏覽器可視部分高度，document.body.clientHeight  瀏覽器所有內容高度

FF瀏覽器:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.scrollHeight  瀏覽器所有內容高度 ,document.body.scrollHeight  瀏覽器所有內容高度
document.documentElement.scrollTop  瀏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 瀏覽器可視部分高度，document.body.clientHeight  瀏覽器所有內容高度

谷歌瀏覽器:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.scrollHeight  瀏覽器所有內容高度， document.body.scrollHeight  瀏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop  瀏覽器滾動部分高度
document.documentElement.clientHeight  瀏覽器可視部分高度，document.body.clientHeight  瀏覽器所有內容高度

DTD未宣告:

IE瀏覽器（準確的說是低版本IE瀏覽器）:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.scrollHeight  瀏覽器可視部分高度，document.body.scrollHeight  瀏覽器所有內容高度 
document.documentElement.scrollTop 始終為0，document.body.scrollTop  瀏覽器滾動部分高度
document.documentElement.clientHeight 始終為0，document.body.clientHeight  瀏覽器可視部分高度

FF瀏覽器:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.scrollHeight  瀏覽器可視部分高度, document.body.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 瀏覽器滾動部分高度
document.documentElement.clientHeight 瀏覽器所有內容高度，document.body.clientHeight 瀏覽器可視部分高度

谷歌瀏覽器:

[JavaScript] 純文字檢視 複製程式碼
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

所以，判斷滾動條是否已拉到頁面最底部，可以用如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
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        
  }
}