局部滚动容器必须绑定到具体 DOM 元素而非 window；需确保其有滚动能力（scrollHeight > clientHeight）、CSS 设置 height/max-height 和 overflow-y: auto；避免 transform 等截断事件；触底判断应加 0.5px 浮点容差。
局部滚动容器必须绑定到具体 DOM 元素，不是 window
直接给 window 绑 scroll 事件监听不到局部区域的滚动。你得拿到那个真正带滚动条的容器元素——比如聊天框、侧边菜单、表格 body 区域——然后对它调用 addEventListener('scroll', handler)。
常见错误是：用 document.querySelector('.list') 拿到了元素，但没检查它是否真有滚动能力。调试时先打一行：console.log(container.scrollHeight, container.clientHeight, container.scrollTop)。如果前两者相等或 scrollTop 始终为 0，说明根本没滚动上下文。
- 确保容器 CSS 有
height或max-height（不能只靠min-height或内容撑开） - 必须设
overflow-y: auto或scroll；auto更稳妥，scroll强制显示滚动条，可避免 Safari 偶发不触发 - 父级若含
transform、perspective或contain: layout，可能截断滚动事件派发，需实测移除验证
触底判断别用 ==，要用浮点容差
container.scrollTop >= container.scrollHeight - container.clientHeight 看似合理，但在高 DPI 屏、缩放页面、iframe 嵌套下极易误判——因为 scrollTop 是浮点数，真实值可能是 123.456 而非整数。
正确写法是留出 0.5px 容差：
- 到底部：
container.scrollTop > container.scrollHeight - container.clientHeight - 0.5 - 到顶部：
container.scrollTop - 别在 scroll 回调里反复读取
scrollHeight——图片懒加载、字体未就绪时它可能不准，建议首次触发后缓存或用requestAnimationFrame延后读取
滚动中别读写布局属性，否则掉帧
每次访问 scrollTop、scrollHeight、clientHeight 都会强制触发同步 layout，连续滚动时极易卡顿，尤其在长列表中实时计算位置。
替代方案优先级如下：
- 能用
IntersectionObserver监听目标项是否进视口，就彻底避开scroll事件 - 必须响应位置时，改用
element.getBoundingClientRect().top - container.getBoundingClientRect().top计算相对偏移，它不触发重排 - 若仍需
scroll，回调里只读值、不操作 DOM、不发请求；把重逻辑（如加载、渲染）移出回调，用requestIdleCallback或节流处理
移动端 WebView 要加 { passive: true }，但小心 preventDefault
安卓 WebView 和旧版 iOS Safari 对 scroll 事件支持不稳定，不加 { passive: true } 会在控制台报警告。但它有个硬约束：一旦加了这个选项，回调里就不能调 event.preventDefault()。
所以如果你的局部滚动容器需要拦截默认行为（比如配合手势做自定义拖拽），就得用 { passive: false }，并手动处理兼容性：
- Vue/React 中用
ref获取容器后，必须等mounted/useEffect执行完、DOM 渲染完毕再绑定，否则尺寸为 0 - iOS Safari 15.4 以下不支持
behavior: 'smooth'，调scrollBy()时降级为无动画版本即可 - 某些安卓 WebView 中，容器用了
will-change: transform可能导致滚动事件丢失，需关闭测试
滚动事件本身不复杂，难的是边界条件：渲染时机、父级样式干扰、像素精度、移动端兼容性——这些地方一漏，就是“明明写了却没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
