【前言】
最近讲到了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(),当窗口滑动时触发
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。