本文介绍如何使用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("下拉刷新,要在这调用啥方法?");
}
});
上述代码展示了完整的实现逻辑,希望能为您的项目开发提供参考。如果您觉得内容有用,欢迎继续支持本站。