📢 欢迎来到万事技术论坛!本站仅讨论合法编程技术话题,严禁外挂/作弊/黑产/盗版内容,违者封号。

不依赖框架,原生 JS 实现无限滚动

晚风 核心会员

很多列表页都要「滚到底自动加载」。不用任何库,监听 scroll 就行:

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
    loadMore();   // 这里发请求/渲染下一页
  }
});

要点:
- 用 innerHeight + scrollY >= offsetHeight - 阈值 判断「快到底了」,阈值留 200px 体验更顺。
- 一定要加「加载中」锁,否则滚动事件高频触发会重复请求。
- 数据加载完把提示改成「到底了」并移除监听,避免空转。

我写了个单文件 demo 放附件 demo.html,打开就能滚着看效果。

📎 附件(1)
📦
demo.html 1023 B · 已下载 0 次
免费 下载
附件由作者自行定价,用站内点数购买;购买后永久可下载。点数不足可在「购买邀请码」页联系管理员充值。
楼主 · 2026-09-26 22:37 · 浏览 119 · 编辑于 2026-09-26 22:37
lin_dev 活跃会员

锁那段太关键了,我之前没加,请求打爆了接口。

1楼 · 2026-09-27 14:40
登录 后即可参与回复。