很多列表页都要「滚到底自动加载」。不用任何库,监听 scroll 就行:
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
loadMore(); // 这里发请求/渲染下一页
}
});
要点:
- 用 innerHeight + scrollY >= offsetHeight - 阈值 判断「快到底了」,阈值留 200px 体验更顺。
- 一定要加「加载中」锁,否则滚动事件高频触发会重复请求。
- 数据加载完把提示改成「到底了」并移除监听,避免空转。
我写了个单文件 demo 放附件 demo.html,打开就能滚着看效果。
楼主 · 2026-09-26 22:37 · 浏览 119
· 编辑于 2026-09-26 22:37

