实现无限滚动需监听滚动事件，通过比较滚动位置与页面高度判断触底，在接近底部时触发数据加载。使用防抖函数控制请求频率，避免频繁调用。维护页码和加载状态，动态追加新数据并显示loading提示。示例中结合scrollTop、clientHeight和scrollHeight判断触发时机，并通过debounce优化性能。初始加载后持续监听滚动，数据为空时移除事件防止重复请求。该方案适用于信息流等长列表场景，提升用户体验。
实现无限滚动加载更多内容，关键在于监听用户滚动行为，在接近页面底部时自动请求新数据并追加到列表中。这种方式提升用户体验，避免手动点击“加载更多”按钮。以下是清晰、实用的实现方法。
1. 监听滚动事件判断是否触底
通过监听 window 的 scroll 事件，结合页面总高度、已滚动距离和视口高度，判断用户是否接近页面底部。
核心代码逻辑：
使用 window.innerHeight 获取可视区域高度使用 document.documentElement.scrollHeight 获取页面总高度使用 window.scrollY 获取垂直滚动偏移量当 scrollY + innerHeight >= scrollHeight – offset 时触发加载
2. 防抖控制请求频率
滚动事件频繁触发，需使用防抖（debounce）避免重复请求。
立即学习“Java免费学习笔记（深入）”；
简单防抖函数示例：
function debounce(func, delay) { let timer; return function (…args) { if (timer) clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); };}
将加载逻辑包裹在防抖函数中，确保用户持续滚动时不频繁发起请求。
3. 动态加载并插入数据
定义加载函数，模拟或调用真实接口获取数据，并将其渲染后插入容器。
维护一个页码变量（如 page = 1），每次加载后递增请求成功后将新内容用 innerHTML += 或 appendChild 添加到列表可添加 loading 提示，请求完成后隐藏
4. 完整简化示例
假设有一个内容容器 #list 和 loading 状态提示：
const list = document.getElementById(‘list’);let page = 1;let isLoading = false;
async function loadMore() {if (isLoading) return;isLoading = true;// 模拟请求const res = await fetch(/api/data?page=${page});const data = await res.json();
if (data.length === 0) {window.removeEventListener(‘scroll’, handleScroll);return;}
data.forEach(item => {const div = document.createElement(‘div’);div.textContent = item.title;list.appendChild(div);});
page++;isLoading = false;}
function handleScroll() {const { scrollTop, scrollHeight, clientHeight } = document.documentElement;if (scrollTop + clientHeight >= scrollHeight – 100) {loadMore();}}
const debouncedScroll = debounce(handleScroll, 200);window.addEventListener(‘scroll’, debouncedScroll);// 初始加载loadMore();
基本上就这些。注意控制请求状态、合理设置触底阈值、避免内存泄漏。无限滚动适合内容流场景，如信息流、商品列表等，不复杂但容易忽略细节。
以上就是JS实现无限滚动加载更多内容_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535812.html
微信扫一扫 
支付宝扫一扫 
