滚动加载数据时怎么判断到底部了? UI爱红 提问于 2026-03-09 21:20:19 阅读 35 交互 我在做列表页的滚动加载,监听 scroll 事件后用 window.innerHeight + window.scrollY >= document.body.offsetHeight 判断是否到底,但有时候会触发多次,甚至在还没滚到底的时候就提前加载了,这咋回事? 我试过加防抖,但还是不太稳定。是不是这个判断条件有问题?我的容器不是 window,而是某个固定高度的 div,是不是得换种方式算? 滚动加载滚动效果 我来解答 赞 7 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 UX熙苒 Lv1 啊这个啊...用固定高度div的话确实不能用window那套。试试这个: const container = document.getElementById('你的容器id'); container.addEventListener('scroll', () => { if (container.scrollTop + container.clientHeight >= container.scrollHeight - 20) { // 加载更多数据 } }); 那个-20是缓冲值,防止太敏感触发多次,差不多就行。 回复 点赞 1 2026-03-09 22:01 加载更多 相关推荐 1 回答 60 浏览 无限滚动加载重复数据怎么办? 我在做商品列表的无限滚动,用的是 IntersectionObserver 监听底部元素。但每次滚动到底部触发加载后,新数据总是和之前的一样,明明接口传的 page 参数是递增的。 我检查了请求,发现... 晶晶 交互 2026-03-31 11:32:16 2 回答 58 浏览 无限滚动加载时列表抖动是怎么回事? 我在用 React 做一个消息列表的无限滚动,每次滚动到底部就加载更多数据,但新数据一进来整个列表会突然跳一下,体验特别差。明明是 append 数据,为啥还会抖? 我试过用 scrollTop 手动... 诸葛一诺 优化 2026-03-18 10:16:21 2 回答 62 浏览 无限滚动加载时怎么避免重复请求? 我在做商品列表的无限滚动,每次滚动到底部就触发加载下一页,但有时候用户滚太快,会连续发好几次请求,导致数据重复或者接口压力大,咋办? 我试过用一个 loading 状态锁住,但好像还是会有问题,比如:... Designer°瑞君 交互 2026-03-10 12:17:18 2 回答 57 浏览 分页加载时怎么避免重复请求和数据错乱? 我用 Vue 做了个列表,滚动到底部就加载下一页,但有时候快速滚动会触发多次请求,导致数据重复或者顺序错乱。试过加 loading 锁,但好像没完全解决问题。 这是我的加载逻辑: <templa... 晓萌 Dev 优化 2026-03-05 19:06:22 2 回答 121 浏览 加载动画在页面底部滚动时位置偏移怎么办? 我在页面底部做了一个加载动画,用position: fixed定位,但滚动页面时动画会跟着滚动条移动,原本写的是这样: .loading-spinner { position: fixed; bott... Mc.玉丹 交互 2026-02-05 21:29:31 2 回答 104 浏览 React分页加载时新数据追加失败怎么办? 我在做一个商品列表分页,用useState存数据和页码,滚动到底部触发fetch请求。但第二次加载时新数据覆盖了旧数据而不是追加,控制台没报错,这是为什么呢? const [items, setIte... 诸葛静静 优化 2026-01-30 23:17:25 2 回答 169 浏览 分页加载时怎么控制数据重复显示? 大家好,我在做无限滚动分页时遇到个怪问题。每次滚动到底部加载新数据时,前几页的数据会突然重复显示,像是被覆盖了又叠加? 我用的是Vue,方法是这样的:items = []存储数据,点击加载更多时调用a... 程序员美蓝 优化 2026-01-29 22:47:35 2 回答 57 浏览 长列表分页加载时怎么避免重复请求和数据错乱? 我用 Intersection Observer 做滚动分页加载,但快速滚动时经常触发多次请求,导致后一页的数据比前一页先回来,顺序全乱了。 试过加 loading 锁:if (loading) re... Designer°晓曼 优化 2026-03-20 03:31:20 2 回答 86 浏览 骨架屏在 Vue 里怎么做到数据加载完自动隐藏? 我用 Vue3 写了个商品列表页,想加个骨架屏提升体验。现在问题是:骨架屏显示出来了,但数据加载完成后不知道该怎么让它自动消失。我试过用 v-if 绑定 loading 状态,但有时候接口返回太快,骨... Top丶丽萍 优化 2026-03-18 21:50:25 1 回答 97 浏览 Vant List 组件加载更多不触发是怎么回事? 我用 Vant 的 List 列表做分页加载,但滚动到底部后 on-load 回调根本不执行,数据只加载了第一页就停了。明明设置了 finished 为 false,也试过手动调用 check 方法,... UX广利 组件 2026-03-16 22:20:21
那个-20是缓冲值,防止太敏感触发多次,差不多就行。