局部滚动容器必须设固定高度和overflow-y；scrolltop手动控制需用浮点边界判断；scrollby()比scrolltop更可靠；避免scroll事件中读写布局属性。
局部滚动容器必须设固定高度和 overflow-y
没有固定高度的 div 即使写了 overflow-y: auto，scrollTop 也会始终为 0，滚动完全无效。浏览器只对“有明确可视区域边界”的容器启用滚动上下文。
- 高度不能靠
min-height或内容撑开——必须是height或max-height -
overflow-y: scroll强制显示滚动条（避免 Safari 下偶发不触发滚动事件）；auto更稳妥，但首次内容加载后可能需重排才出现 - 父级若含
transform、perspective或filter，会创建新层叠上下文，导致offsetTop失准，此时应改用getBoundingClientRect().top - container.getBoundingClientRect().top
用 scrollBy() 实现按钮驱动的步进滚动最可靠
相比手动维护 scrollTop，scrollBy() 是相对位移，不依赖初始状态，连点、重排、异步渲染后仍稳定。它天然适配“点一下滚一行/一段”的交互直觉。
- 对整个页面：直接调用
window.scrollBy(0, 50)或window.scrollBy({ top: 50, behavior: 'smooth' }) - 对局部容器：先获取容器元素，再调用其
scrollBy()方法（现代浏览器已支持，无需 polyfill）：const container = document.getElementById('list-container');<br>container.scrollBy({ top: 40, behavior: 'smooth' }); - Safari 15.4 以下不支持
behavior: 'smooth'，可降级：container.scrollBy({ top: 40 })，视觉差异不大
scrollTop 手动控制时边界判断不能只看 0 或 max
仅用 container.scrollTop === 0 判断是否到顶，或 container.scrollTop >= container.scrollHeight - container.clientHeight 判断到底，在高 DPI 屏、缩放页面、iframe 嵌套等场景下极易误判。真实滚动位置受 subpixel 渲染影响，值可能是小数。
- 向上禁用逻辑应写成：
container.scrollTop - 向下禁用逻辑应写成：
container.scrollTop > container.scrollHeight - container.clientHeight - 0.5 - 按钮状态更新建议节流（如
requestIdleCallback或 100mssetTimeout），避免滚动中高频重绘
滚动性能关键：避免在 scroll 事件里读写 scrollTop
每次读取 scrollTop 都会强制同步触发 layout，连续滚动时极易掉帧。尤其在长列表中监听 scroll 并实时计算位置，卡顿明显。
- 改用
IntersectionObserver监听目标项是否进入视口，完全规避 layout 强制刷新 - 如必须响应滚动位置，用
getBoundingClientRect()替代scrollTop + offsetTop计算，它不触发回流 - 滚动容器上加
overscroll-behavior-y: contain，防止 iOS 滚动穿透到父级，避免意外触发行为
局部滚动看着简单，真正压测下来，90% 的卡顿和错位都出在 height 设置不牢、scrollTop 边界浮点误判、以及 scroll 事件里反复读写布局属性这三处。别信“设了 overflow 就能滚”，得一条条验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
