前段時間學習怎么寫一個瀑布流的時候，就接觸到document.documentElement和document.body的區別，然后今天查資料的時候看到這篇博客，遂轉載記錄在此。
兩種特殊的文檔屬性可用來訪問根節點：
document.documentElement
document.body
第一個屬性可返回存在于 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展，提供了對 <body> 標簽的直接訪問。
【文檔類型已申明】
IE
document.documentElement.scrollHeight 瀏覽器所有內容高度
document.documentElement.scrollTop 瀏覽器滾動部分高度，
document.documentElement.clientHeight 瀏覽器可視部分高度，
document.body.scrollHeight 瀏覽器所有內容高度
document.body.scrollTop 始終為0
document.body.clientHeight 瀏覽器所有內容高度
FF
document.documentElement.scrollHeight 瀏覽器所有內容高度 ,
document.documentElement.scrollTop 瀏覽器滾動部分高度，
document.documentElement.clientHeight 瀏覽器可視部分高度，
document.body.scrollHeight 瀏覽器所有內容高度
document.body.scrollTop 始終為0
document.body.clientHeight 瀏覽器所有內容高度
Chrome
document.documentElement.scrollHeight 瀏覽器所有內容高度，
document.documentElement.scrollTop 始終為0，
document.documentElement.clientHeight 瀏覽器可視部分高度，
document.body.scrollHeight 瀏覽器所有內容高度
document.body.scrollTop 瀏覽器滾動部分高度
document.body.clientHeight 瀏覽器所有內容高度
【文檔類型未申明】
IE
document.documentElement.scrollHeight 瀏覽器可視部分高度，
document.documentElement.scrollTop 始終為0，
document.documentElement.clientHeight 始終為0，
document.body.scrollHeight 瀏覽器所有內容高度
document.body.scrollTop 瀏覽器滾動部分高度
document.body.clientHeight 瀏覽器可視部分高度
FF
document.documentElement.scrollHeight 瀏覽器可視部分高度,
document.documentElement.scrollTop 始終為0，
document.documentElement.clientHeight 瀏覽器所有內容高度，
document.body.scrollHeight 瀏覽器所有內容高度
document.body.scrollTop 瀏覽器滾動部分高度
document.body.clientHeight 瀏覽器可視部分高度
Chrome
document.documentElement.scrollHeight 瀏覽器可視部分高度,
document.documentElement.scrollTop 始終為0，
document.documentElement.clientHeight 瀏覽器所有內容高度，
document.body.scrollHeight 瀏覽器所有內容高度
document.body.scrollTop 瀏覽器滾動部分高度
document.body.clientHeight 瀏覽器可視部分高度
瀏覽器所有內容高度即瀏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。
綜上
1、document.documentElement.scrollTop和document.body.scrollTop始終有一個為0，所以可以用這兩個的和來求scrollTop
2、scrollHeight、clientHeight 在DTD已聲明的情況下用documentElement，未聲明的情況下用body
這里之前有誤， document.compatMode 可以用來判斷是否聲明了DTD， 值為"BackCompat"：未聲明，值為"CSS1Compat"：已聲明。
下面就是如何判斷滾動條是否滾動到頁面最底部，也是寫瀑布流的時候很關鍵的一部分代碼。
1 window.onscroll = function (){ 2 var marginBot = 0; 3 if (document.compatMode === "CSS1Compat"){ 4 marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)- document.documentElement.clientHeight; 5 } else { 6 marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight; 7 } 8 if(marginBot<=0) { 9 //do something 10 } 11 }
document.compatMode用來判斷當前瀏覽器采用的渲染方式。
BackCompat：標準兼容模式關閉。
CSS1Compat：標準兼容模式開啟。
當document.compatMode等于BackCompat時，瀏覽器客戶區寬度是document.body.clientWidth；
當document.compatMode等于CSS1Compat時，瀏覽器客戶區寬度是document.documentElement.clientWidth。
瀏覽器客戶區高度、滾動條高度、滾動條的Left、滾動條的Top等等都是上面的情況。
文章列表
留言列表
