jquery 页面滚动事件 scroll()

本文主要是介绍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()的值打印出来。

这篇关于jquery 页面滚动事件 scroll()的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---