上一篇主要分析了一下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的值，并将这种方法进行封装，方便调用，这样就可以快速处理不同浏览器中的兼容性问题，获取我们需要的值了。