用 IntersectionObserver 替代滚动监听：解决长列表页面卡顿与重复触发
原创
用 IntersectionObserver 替代滚动监听：解决长列表页面卡顿与重复触发
超哥前端记录
发布于 2026-09-23 10:58:46
发布于 2026-09-23 10:58:46
概述
在做后台管理系统或者内容 feed 流时，经常遇到“滚动到某个区域才加载更多”或者“元素进入可视区域后播放入场动画”的需求。最早我们普遍用 scroll 事件监听配合 getBoundingClientRect 计算位置，简单场景没问题，但随着列表变长、DOM 节点变多，滚动时频繁触发布局计算和重绘，页面掉帧明显，而且节流参数没调好会出现加载两次、动画闪烁。IntersectionObserver
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号