jquery 页面滚动事件 scroll()

仅供学习，转载请注明出处

为了方便理解，我先画了一个下面将要介绍的尺寸示意图

获取浏览器可视区宽度高度

$(window).width();
$(window).height();      

缩小一下浏览器，查看可视区的宽高有无变化，如下：

这里主要就是浏览器内可以看到页面的宽高。

获取页面文档的宽度高度

$(document).width();
$(document).height();      

在没有任何元素的情况下，document的宽高是与window的宽高一致的，那么如果给document加入一些元素呢？

可以看到document的宽高与window的宽高不一致了，主要是因为被div撑大了。

这里还会有人发现，document.width = 2008 ，并不是 div.width = 2000 的值，这是因为浏览器默认有padding和margin，设置为0即可。

获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();      

通常一般都是只有设置文档的高度进行滚动，横向滚动不好看，那么下面就来写个竖向滚动的滚动距离示例。

页面滚动事件

$(window).scroll(function(){  
    ......  
})      

编写将滚动的​

​$(document).scrollTop()​

​的值打印出来。