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