判断是否加载更多 方式
来源：12-15 手写无限滚动的功能（下）
Jack N
2025-03-07
黑石老师，您看这个方案可以吗？
答
基于这个 API：Intersection Observer API 。判断是否加载更多
特性分析
Intersection Observer API ，可以用于检测目标元素，相对于祖先元素或顶层文档交叉情况的方式。
在两个元素交叉时，会触发传入的函数，那么可以在这这个函数里判断，某个元素是否在可视范围之内。
使用方式
- 在列表的底部放一个元素 （假设名字为 line），这元素存在且不显示
- 当这个 line 元素在可视范围内时，就认为到底了（触底条件）。
- 偏移量：这个 IntersectionObserver API 的入参支持传入阈值，可以把这个阈值，作为偏移量
和 scrollTop 对比
scrollTop + clientHeight = scrollHeight
- 兼容性比较好。在移动端，有的用户可能会使用比较老的手机
- 要记得三个 API，还要进行运算，相对比较繁琐
Intersection Observer
- 比较新，可能会有兼容性问题。
- API，使用起来比较简单，不用自己算。
参考链接
写回答
2回答
-
不需要手动计算
scrollTop + clientHeight等复杂的逻辑。只需判断元素是否进入视窗范围即可，降低了出错概率。
我觉得很好
112025-03-14 -
向学习者学习
2025-03-17
哇，学习了！
00
相似问题