上一篇主要分析了一下offset家族屬性，本篇文章則主要是來分析一下scroll家族屬性。
首先，scroll家族包括4個屬性：
-
網頁正文寬度：document.body.scrollWidth;
-
網頁正文高度：document.body.scrollHeight;
-
網頁被卷去的高：document.body.scrollTop;
-
網頁被卷去的左：document.body.scrollLeft;
接下來，我們先簡單看一下相關屬性。
例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 3000px; } </style> </head> <body> <script type="text/html">
console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
</script> </body> </html>
在谷歌瀏覽器下面，我們會發現，雖然有滾動條，甚至在滾動時候，都沒有打印值，那是因為我們在滾動的時候是觸發的滾動事件，所以我們需要監聽的是滾動事件。
因此，我們將上面的代碼稍作修改。將js部分改為下面的這樣的。
例2：
<script type="text/html"> window.onscroll = function () { console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft); } </script>
此時，我們就可以監聽到瀏覽器的滾動事件相應的值了，
封裝scroll
其實，在實際運用過程中，為了處理不同瀏覽器的差距，我們用來表示scroll的值的方式有所不同，這需要從瀏覽器的模式說起。早期的瀏覽器在對css進行解析的時候，並未遵循W3C標准，這時的解析方式被稱為怪異模式（quirks）,后來隨着W3C的標准越來越重要，眾多的瀏覽器開始遵循W3C標准解析css，此時我們稱為嚴格模式（strict mode）。
我們可以通過document.compatMode的值來判斷是否處於標准模式，從而決定用什么方式獲取相應的scroll值。
例3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 3000px; } </style> </head> <body> <script> function scroll() { if(window.pageYOffset !== null){ return { top: window.pageYOffset, left: window.pageXOffset } }else if(document.compatMode === "CSS1Compat"){ // W3C return { top: document.documentElement.scrollTop, left: document.documentElement.scrollLeft } }else{ return { top: document.body.scrollTop, left: document.body.scrollLeft } } } window.onscroll = function () { console.log(scroll().top); } </script> </body> </html>
在上面的代碼中，我們通過判斷不同的模式使用不同的方法獲取scroll的值，並將這種方法進行封裝，方便調用，這樣就可以快速處理不同瀏覽器中的兼容性問題，獲取我們需要的值了。