jQuery实现滚动到底部自动加载更多内容
作者:微光时间:2026-10-21 22:06:31浏览:256
本文介绍如何使用jQuery监听窗口滚动事件,通过计算滚动条位置、文档总高度与可视区域高度的关系,判断用户是否滚动至页面底部。当满足条件时自动调用数据加载函数,实现类似无限滚动的分页加载效果,提升用户体验。
jQuery滚动到底部自动加载实现
具体实现代码如下所示:
//滚动条到页面底部加载更多案例
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
// console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
if(scrollTop + clientHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 count++; //每次滑动count加1
filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法,count为当前分页数
}else if(scrollTop<=0){
//滚动条距离顶部的高度小于等于0 TODO
//alert("下拉刷新,要在这调用啥方法?");
}
});
上述代码展示了完整的实现逻辑,希望能为您的项目开发提供参考。如果您觉得内容有用,欢迎继续支持本站。
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
