jQuery判断滚动到底部或顶部
程序员文章站
2022-07-16 08:02:28
...
【前言】
最近讲到了jQuery,本文分享下jQuery判断滚动到底部或顶部
【主体】
首先需要知道几个方法
1、滚动条滚动的距离
2、页面可见区域的高度
3、整个HTML页面文档的高度
详解:
(1)滚动条滚动的距离
$(window).scrollTop()和$(document).scrollTop()具有相同的效果,都为返回滚动条的垂直位置,但是$(window).scrollTop()被所有浏览器支持。所以建议以后用$(window).scrollTop()来获取滚动距离
(2)页面可见区域的高度
$(window).height()
(3)整个HTML页面文档的高度
$(document).height()
【案例】
1、(滚动条距离+页面可见区域高度 = HTML页面文档高度),时刚好滑动到底部。但是出滑屏智能机后,手机页面有一个橡皮筋效果,所以滑动到底部后仍然可以继续往下滑。这时会出现(滚动条距离+页面可见区域高度 > HTML页面文档高度)。所以判断是否到底部的判断条件为
$(window).height() + $(window).scrollTop() >= $(document).height();
2、判断是否到顶部
$(window).scrollTop()为滚动条滑动距离,如果为0时表示滚动到了顶部。
$(window).scrollTop() == 0;
【小结】
(1)$(document)是获取文档对象 ;$(window)是获取窗口对象
(2)滚动事件为scoll(),语法为$(selector).scroll(),当窗口滑动时触发
.
下一篇: jquery 调用live()方法无效?