当前位置：首页 > 文章列表 > 文章 > 前端 > JS无限滚动加载实现方法详解

JS无限滚动加载实现方法详解

2025-11-01 14:33:57 0浏览收藏

大家好，今天本人给大家带来文章《JS无限滚动加载技巧详解》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

实现无限滚动需监听滚动事件，通过比较滚动位置与页面高度判断触底，在接近底部时触发数据加载。使用防抖函数控制请求频率，避免频繁调用。维护页码和加载状态，动态追加新数据并显示loading提示。示例中结合scrollTop、clientHeight和scrollHeight判断触发时机，并通过debounce优化性能。初始加载后持续监听滚动，数据为空时移除事件防止重复请求。该方案适用于信息流等长列表场景，提升用户体验。

JS实现无限滚动加载更多内容_javascript技巧

实现无限滚动加载更多内容，关键在于监听用户滚动行为，在接近页面底部时自动请求新数据并追加到列表中。这种方式提升用户体验，避免手动点击“加载更多”按钮。以下是清晰、实用的实现方法。

1. 监听滚动事件判断是否触底

通过监听 window 的 scroll 事件，结合页面总高度、已滚动距离和视口高度，判断用户是否接近页面底部。

核心代码逻辑：

使用 window.innerHeight 获取可视区域高度
使用 document.documentElement.scrollHeight 获取页面总高度
使用 window.scrollY 获取垂直滚动偏移量
当 scrollY + innerHeight >= scrollHeight - offset 时触发加载

2. 防抖控制请求频率

滚动事件频繁触发，需使用防抖（debounce）避免重复请求。

简单防抖函数示例：

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无限滚动加载实现方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于防抖,数据加载,无限滚动,滚动事件,触底判断的知识点！

防抖数据加载无限滚动滚动事件触底判断