jQuery实现滚动到底部自动加载更多内容

作者:微光

时间:2026-10-21

浏览:255

本文介绍如何使用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("下拉刷新,要在这调用啥方法?");
 }
});

上述代码展示了完整的实现逻辑,希望能为您的项目开发提供参考。如果您觉得内容有用,欢迎继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章