用 IntersectionObserver 替代滚动监听:解决长列表页面卡顿与重复触发
在做后台管理系统或者内容 feed 流时,经常遇到“滚动到某个区域才加载更多”或者“元素进入可视区域后播放入场动画”的需求。最早我们普遍用 scroll 事件监听配合 getBoundingClientRect 计算位置,简单场景没问题,但随着列表变长、DOM 节点变多,滚动时频繁触发布局计算和重绘,页面掉帧明显,而且节流参数没调好会出现加载两次、动画闪烁。IntersectionObserver 是浏览器原生提供的异步观察 API,它把“元素是否进入视口”这件事交给浏览器内部调度,不再需要持续监听滚动。这篇文章从实际踩坑出发,讲清楚 IntersectionObserver 的基础用法、常见...