document.body.scrollWidth、document.documentElement.scrollWidth系列寬高值對比

最近深入研究了一下body.scrollWidth、document.documentElement.scrollWidth等等類似的一系列瀏覽器寬高的值，清晰總結了一下，還是通過代碼的方式說明問題：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        body{border: 10px solid red;margin: 0;padding: 0;}        #one{  min-width: 900px;}        #one div{  border: 1px solid red ;margin-left: 20px;background-color: yellow;width: 300px;height:400px;;display: inline-block}    </style></head><body><div id="one">    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div>    <div>fdsagfdgsdf</div></div><script>    console.log(screen.width);          //即是window.screen.width，電腦螢幕的寬度，僅與電腦螢幕大小有關，與其他無關    console.log(screen.height);         //即是window.screen.height，電腦螢幕的高度，僅與電腦螢幕大小有關，與其他無關    console.log(window.screen.availWidth);   //電腦螢幕寬度（screen.width）中可用於顯示瀏覽器的最大寬度(這裡考慮減去電腦螢幕下方工具列的寬度)    console.log(window.screen.availHeight);  //電腦螢幕高度中可用於顯示瀏覽器的最大高度    console.log(window.screenTop);      //瀏覽器視窗距離電腦螢幕上邊界的距離    console.log(window.screenLeft);     //瀏覽器視窗距離電腦螢幕左邊界的距離    console.log("---------------------------------------------------------------------------------------------------------------------------");    console.log(window.innerWidth);     //網頁本文的內部寬度，即網頁本文的可視寬度，即在瀏覽器上能看見的部分的寬度，如果該可視地區包含了捲軸（這裡不是說捲軸可以滑動網頁的寬度，而是單純捲軸這個組件的寬度），該寬度就是可視頁面加上捲軸組件的寬度    console.log(window.innerHeight);    //網頁本文的內部高度，即網頁本文的可視高度，即在瀏覽器上能看見的部分的高度，捲軸處同理。    console.log(window.outerWidth);     //瀏覽器視窗的外部寬度    console.log(window.outerHeight);    //瀏覽器視窗的外部高度    console.log("---------------------------------------------------------------------------------------------------------------------------");    console.log(window.pageYOffset);   //需要網頁存在捲軸才可以，存在豎向捲軸時，網頁本文向下滾動一段距離n px，該值即為n    console.log(window.pageXOffset);   //同理，無捲軸值為0，存在橫向捲軸時，網頁本文(注意是本文，不是捲軸)向右滾動一段距離n px，該值即為n    console.log(document.body.scrollTop);    //與上一對值相同（捲軸位置）    console.log(document.body.scrollLeft);    console.log(document.documentElement.scrollTop);  //與上一對值相同（與上一對都是獲得捲軸位置，但是存在相容問題，具體與html檔案頭的<DOCTYPE ...>有關，上一對值為0的時候這一對顯示正常，這一對為0的時候上一對值顯示正常）    console.log(document.documentElement.scrollLeft);    console.log("---------------------------------------------------------------------------------------------------------------------------");    console.log(document.documentElement.scrollWidth);   //整個網頁的寬度，即整個給使用者觀看的網頁部分的寬度（無橫向捲軸時即為網頁寬度，有捲軸則加上捲軸可以滾動部分網頁的寬度）    console.log(document.documentElement.scrollHeight);  //整個網頁的高度(如果有body{border:10px solid red;}，該邊界寬也算進去)    console.log(document.body.scrollWidth);     //與上一對值相同    console.log(document.body.scrollHeight);    console.log("---------------------------------------------------------------------------------------------------------------------------");    console.log(document.documentElement.offsetWidth);  //可視地區的寬度，但是不包含捲軸組件的十幾px像素，同document.documentElement.clientWidth(如果有body{border:10px solid red;}，該邊界寬也算進去)    console.log(document.documentElement.offsetHeight); //整個網頁的高度,同document.body.scrollHeight(如果有body{border:10px solid red;}，該邊界寬也算進去)    console.log(document.body.offsetWidth);       //與上一對值相同    console.log(document.body.offsetHeight);    console.log("---------------------------------------------------------------------------------------------------------------------------");    console.log(document.documentElement.clientWidth);  //頁面可視寬度，但是不包含捲軸組件的十幾px像素(如果有body{border:10px solid red;}，該邊界寬也算進去)    console.log(document.documentElement.clientHeight); //可視地區高度，document.documentElement 實際上就是 <html> 元素,只不過顯示的是可見的部分，即瀏覽器視窗大小（網頁無捲軸時與window.innerHeight同值）    console.log(document.body.clientWidth);         //與上一對值意義完全不同，這是body的寬度，即審查元素時body元素的寬度，但是不包含邊線，例如body{border:10px solid red;}，這邊界的寬度是不會算在裡面的    console.log(document.body.clientHeight);       //body的高度,即審查元素時body元素的寬度（理同）</script></body></html>

這其中要注意的一點是document.documentElement.***和document.body.***之間的區別，一定要做好區別，前者是對標準模式下的IE和其他瀏覽器而言，後者是對於怪異模式下的瀏覽器而言的。這裡有一個相容性良好的例子——檢測網頁滾動到底部的計算：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>滾動到網頁底部判斷</title></head><body><div id="main">    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>2222222222222222222222222222222222222222</p></div><script>    window.onscroll = function() {        console.log(h+" "+yy().y+" "+yy().yscroll);        if(yy().y + yy().yscroll == h){            console.log('滾動到網頁工底部啦。。。。。。。。。。。。。');        }    };    /*查詢時段視口尺寸 和 捲軸滾動位置*/    var yy = function(){        /*除了IE8以及更早的版本以外，其他瀏覽器都能用*/        if(window.innerWidth != null){            return {                y:window.innerHeight,                yscroll:window.pageYOffset            }        }        var d = window.document;        /*對標準模式下的IE（或者任何瀏覽器）*/        if(document.compatMode == 'CSS1Compat'){            return {                y:d.documentElement.clientHeight,                yscroll:d.documentElement.scrollTop            }        }else{            /*對怪異模式下的瀏覽器*/            return {                y:d.body.clientHeight,                yscroll:d.body.scrollTop            }        }    };    /*獲得整個文檔高度（可視與不可視高度之和）*/    var h = (function(){        var d = window.document;        if(document.compatMode == 'CSS1Compat'){            return document.documentElement.offsetHeight;        }else {            return d.body.offsetHeight;        }    }());</script></body></html>