3. 滾動大小 最后要介紹的是滾動大小（scroll dimension），指的是包含滾動內容的元素的大小。
有些元素（例如 元素），即使沒有執行任何代碼也能自動地添加滾動條；但另外一些元素，則需要通過 CSS 的 overflow 屬性進行設置才能滾動。以下是 4 個與滾動大小相關的屬性。
scrollHeight：在沒有滾動條的情況下，元素內容的總高度。
scrollWidth：在沒有滾動條的情況下，元素內容的總寬度。
scrollLeft：被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置。
scrollTop：被隱藏在內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置。
scrollWidth 和 scrollHeight 主要用於確定元素內容的實際大小。例如，通常認為元素 是在 Web 瀏覽器的視口中滾動的元素（IE6 之前版本運行在混雜模式下時是元素）。因此，帶有 垂直滾動條的頁面總高度就是 document.documentElement.scrollHeight。 對於不包含滾動條的頁面而言， scrollWidth 和 scrollHeight 與 clientWidth 和 clientHeight 之間的關系並不十分清晰。在這種情況下，基於 document.documentElement 查看 這些屬性會在不同瀏覽器間發現一些不一致性問題，如下所述。
Firefox 中這兩組屬性始終都是相等的，但大小代表的是文檔內容區域的實際尺寸，而非視口的 尺寸。 Opera、Safari 3.1 及更高版本、Chrome 中的這兩組屬性是有差別的，其中 scrollWidth 和 scrollHeight 等於視口大小，而 clientWidth 和 clientHeight 等於文檔內容區域的大小。 圖靈社區會員 StinkBC(StinkBC@gmail.com) 專享 尊重版權 324 第 12 章 DOM2 和 DOM3 IE（在標准模式）中的這兩組屬性不相等，其中 scrollWidth 和 scrollHeight 等於文檔內 容區域的大小，而 clientWidth 和 clientHeight 等於視口大小。 圖 12-3 在確定文檔的總高度時（包括基於視口的最小高度時），必須取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保證在跨瀏覽器的環境下得到精確的結果。下面就 是這樣一個例子。 var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight); var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth); 注意，對於運行在混雜模式下的 IE，則需要用 document.body 代替 document.documentElement。 通過 scrollLeft 和 scrollTop 屬性既可以確定元素當前滾動的狀態，也可以設置元素的滾動位 置。在元素尚未被滾動時，這兩個屬性的值都等於 0。如果元素被垂直滾動了，那么 scrollTop 的值 會大於 0，且表示元素上方不可見內容的像素高度。如果元素被水平滾動了，那么 scrollLeft 的值會 大於 0，且表示元素左側不可見內容的像素寬度。這兩個屬性都是可以設置的，因此將元素的 scrollLeft 和 scrollTop 設置為 0，就可以重置元素的滾動位置。下面這個函數會檢測元素是否位 於頂部，如果不是就將其回滾到頂部。 function scrollToTop(element){ if (element.scrollTop != 0){ element.scrollTop = 0; } } 這個函數既取得了 scrollTop 的值，也設置了它的值。