滾動大小（scroll dimension）
滾動大小指的是包含滾動內容元素的大小。
以下是與元素滾動內容大小相關的屬性：
1. scrollWidth：在沒有滾動條的情況下，元素內容的總寬度。
2. scrollHeight：在沒有滾動條的情況下，元素內容的總高度。
3. scrollTop：被隱藏在內容區域左側的像素數。設置該值可以改變元素的滾動位置。
4. scrollLeft：被隱藏在內容區域上方的像素數。設置該值可以改變元素的滾動位置。
接下來就舉例講解一下各個屬性是什么意思，在這里使用html元素最為觀察元素，因為，通常認為<html>元素是在web瀏覽器的視口中滾動的元素（IE6之前版本運行在混雜模式下是<body>元素），因為該元素即使沒有任何執行代碼也能自動地添加滾動條，其他元素需要通過css設置overflow屬性，才會出現滾動條。
案例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .container { height: 1200px; } .container div { height: 400px; width: 150%; font-size: 20px; font-weight: bold; text-align: right; } div.red { background-color: red; } div.green { background-color: green; } div.yellow { background-color: yellow; } div.black { background-color: black; } .print { position: fixed; top: 10px; left: 10px; } </style> </head> <body> <div class="container"> <div class="red">最右邊</div> <div class="green">最右邊</div> <div class="yellow">最右邊</div> </div> <div class="print"> <button> 打印相關屬性值 </button> <div></div> </div> <script> var _body = document.documentElement; var btn = document.querySelector('.print button'); var text = document.querySelector('.print div'); btn.onclick = function () { var html = ""; var ch = _body.clientHeight; var cw = _body.clientWidth; var sh = _body.scrollHeight; var sw = _body.scrollWidth; var st = _body.scrollTop; var sl = _body.scrollLeft; html += "clientHeight:" + ch + "<br>"; html += "clientWidht:" + cw + "<br>"; html += "scrollHeight:" + sh + "<br>"; html += "scrollWidth:" + sw + "<br>"; html += "scrollTop:" + st + "<br>"; html += "scrollLeft:" + sl + "<br>"; text.innerHTML = html; } </script> </body> </html>
頁面第一次加載完之后，我們點擊按鈕得到相關屬性值如下：
現在我們往上，往左滾動一下，在看一下結果：
發現只有scrollTop和scrollLeft發生了一定的改變，其他四個屬性沒有發生改變（並不是說這四個屬性不會改變，在不操作滾動內容和調整窗口大小的情況下，是不會發生改變的，我們的案例就是在此基礎上進行的）。
現在我們在來看一下滾動到最底部的時候，結果又是怎么樣的：
發現，變化的還是scrollTop和scrollLeft（基於上次位置，不左滾動的話scrollLeft是不會變的，我是向左滾動了的，以此避免認為向上滾動scroolleft的值會改變），
但是仔細一看會發現一組非常有意思的數據，即 clientHeight + scrollTop = scrollHeight;
在看一下左滾動到最右邊，會有什么變化：
此時我們發現 clientWidth + scrollLeft = scrollWidth;
到此我們發現了這樣一個規律，就是元素中的滾動內容滾動到邊界的時候，就會有下面一個或者兩個等式成立：
1. clientWidth + scrollLeft = scrollWidth;
2. clientHeight + scrollTop = scrollHeight;
其實仔細一想也很好理解，比如元素中的滾動內容滾動到最底部的時候，就無法繼續滾動，那么此時內容在元素中的可見高度就是元素的clientHeight，而此時的scrollTop就是元素超出元素上方的距離，這兩個值相加就一定會等於元素的scrollHeight，另一個等式同理。
有了這個等式的成立，那么我們就可以做很多事情，比如下拉加載，自定義滾動條等等，同時通過scrollTop的值的設置，我們還可以實現回到頂部的功能。
以上我們介紹的是在有滾動條的情況下，出現的一種現象，那在沒有滾動條的情況下又會是一個什么樣子了？（前提還是把html元素作為觀察對象）。
其實在不包含滾動條的頁面，scrollWidth和scrollHeight與clientWidth和clientHeight之間的關系不十分清晰，不同瀏覽器之間存在着差異。
1. FireFox 中這兩組屬性大小相等，但大小代表的是文檔內容區域的實際尺寸，而非視口的尺寸（未經測試，查閱資料得知）
2. Safari中clientWidht和scrollWidth相等等於視口寬度，clientHeight等於視口的高度，scrollHeight等於文檔內容區域的高度（Safari版本12.1.2）
3. chrome中這兩組屬性相等，等於視口大小（chrome版本 79.0.3945.130（正式版本） （64 位）mac）
4. IE（在標准模式下）中的兩組屬性不相等，其中scrollWidth和scollHeight等於文檔內容區域的大小，另一組屬性等於視口的大小。（未經測試，查閱資料得知）
所以有了這些差異，所以我們確定文檔的總高度和寬度的時候，必須取得scrollWIdth/clientWidht和scrollHeihgt/clientHeight中的最大值，才能保證在跨瀏覽器環境中得到精確的結果，現給下兼容寫法：
function getDoc() { // 混雜模式 if (document.compatMode !== 'BackCompat') { return { height: Math.max(document.body.scrollHeight, document.body.clientHeight), width: Math.max(document.body.scrollWidth, document.body.clientHeight) } } else { return { height: Math.max(document.documentElement.scrollHeight, document.body.clientHeight), width: Math.max(document.documentElement.scrollWidth, document.body.clientHeight) } } };
關於滾動元素大小的知識點介紹完畢，如果有錯就告知一聲，我好及時修改。