本文摘自PHP中文网,作者coldplay.xixi,侵删。
jquery判断滚动条是否到底部的方法:1、使用【scrollTop()】方法,jQuery检测浏览器window滚动条到达底部;2、使用【scroll_div】检测动条到达底部事件。
本教程操作环境:windows7系统、jquery3.2.1版本、thinkpad t480电脑。
jquery判断滚动条是否到底部的方法:
一、jQuery检测浏览器window滚动条到达底部
jQuery获取位置和尺寸相关函数:
$(document).height()
获取整个页面的高度
$(window).height()
获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的
scrollTop()
获取匹配元素相对滚动条顶部的偏移。
scrollLeft()
获取匹配元素相对滚动条左侧的偏移。
scroll([[data],fn])
当滚动条发生变化时触犯scroll事件
jQuery检测滚动条到达底部代码:
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready( function () {
$(window).scroll( function () {
if ($(document).scrollTop()<=0){
alert( "滚动条已经到达顶部为0" );
}
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
alert( "滚动条已经到达底部为" + $(document).scrollTop());
}
});
});
|
二、jQuery检测div中滚动条到达底部
上半篇介绍了jQuery检测浏览器window滚动条到达底部,其实还并不理解scrollTop和scrollHeight概念,通常滚动条都是放在div中的。
如下检测id为scroll_div
滚动条到达底部事件:
1 2 3 4 5 6 7 | <div id= "scroll_div" style= "overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red" >
<div style= "height:10000px" >
来自于www.php中文网.cn<br>
来自于www.php中文网.cn<br>
来自于www.php中文网.cn<br>
</div>
</div>
|
首先需要理解几个概念:
也就是说scrollDiv的高度+scrollTop滚动的最大高度=scrollHeight
于是检测div中div滚动条高度就简单了:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready( function () {
$( "#scroll_div" ).scroll( function (){
var divHeight = $(this).height();
var nScrollHeight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
$( "#input1" ).val(nScrollHeight);
$( "#input2" ).val(nScrollTop);
$( "#input3" ).val(divHeight);
if (nScrollTop + divHeight >= nScrollHeight) {
alert( "到达底部了" );
}
});
});
|
如果是异步加载数据,数据没加载完,又触犯了同一页的数据加载请求,我通常是加一个flag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(document).ready( function () {
var flag = false;
$( "#scroll_div" ).scroll( function (){
if (flag){
return false;
}
var divHeight = $(this).height();
var nScrollHeight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
$( "#input1" ).val(nScrollHeight);
$( "#input2" ).val(nScrollTop);
$( "#input3" ).val(divHeight);
if (nScrollTop + divHeight >= nScrollHeight) {
flag = true;
alert( "到达底部了" );
}
});
});
|
相关免费学习推荐:javascript(视频)
以上就是jquery如何判断滚动条是否到底部的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jQuery中如何数组去重复数据
jQuery与ajax的区别是什么
jQuery出现中文乱码怎么解决
jQuery如何判断时间戳星期几
jQuery内容过滤选择器有哪些
jQuery中怎么格式化时间
jQuery 怎么让a不跳转
jQuery如何判断元素中是否存在标签
jQuery如何判断checkbox是否选中
jQuery中this和$(this)的区别是什么?
更多相关阅读请进入《jQuery》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jquery如何判断滚动条是否到底部