局部滚动容器必须设固定高度（如height或max-height），否则overflow-y无效；横向滑动需flex布局+宽度约束+flex:0 0 auto子项；锚点跳转需preventDefault+scrollBy；避免scroll事件中读写scrollTop。
局部滚动容器必须设固定高度 + overflow-y
没固定高度的 div 即使写了 overflow-y: auto，scrollTop 永远是 0，滚动完全不生效。浏览器只对“有明确可视区域边界”的容器启用滚动上下文。
常见错误写法：min-height: 400px、靠内容撑高、或 height: 100% 但父级没定宽 —— 这些都会让滚动失效。
- 必须用
height或max-height（推荐后者，更安全） -
overflow-y: scroll强制显示滚动条，避免 Safari 下偶发不触发scroll事件；auto更省空间，但首次渲染后可能需重排才出现滚动条 - 若父级含
transform、perspective或filter，会创建新层叠上下文，导致offsetTop失准；此时应改用getBoundingClientRect().top - container.getBoundingClientRect().top
横向列表要能滑动，得先满足 flex 布局前提
只加 overflow-x: auto 九成概率不滑——不是属性没用，而是布局没让它“溢出”。关键在容器和子项的协同约束。
- 容器必须设
display: flex和flex-wrap: nowrap，否则子项默认换行 - 容器要有明确宽度约束：比如
width: 100%（且父级已定宽）、max-width: 600px，不能只靠内容撑开 - 每个子项设
flex: 0 0 auto（禁止压缩 + 不换行 + 宽度由内容决定） - 移动端务必加
-webkit-overflow-scrolling: touch，否则 iOS Safari 滑不动或卡顿 - 显式加
overflow-y: hidden，避免 macOS 或触控设备出现双轴滚动条
阻止锚点链接触发主页面滚动
点击 <a href="#item-3"> 默认会让整个页面滚动到目标元素，而不是只滚局部容器。这不是 JS 能“补救”的问题，必须从事件拦截 + 位置计算两步走。
立即学习“前端免费学习笔记（深入）”；
- 给所有锚点链接加
click监听，调用e.preventDefault()阻止默认跳转 - 用
targetElement.getBoundingClientRect()计算目标在局部容器内的相对偏移，而非依赖offsetTop（易受层叠上下文干扰） - 对容器调用
container.scrollBy({ top: delta, behavior: 'smooth' })，比手动设scrollTop更稳定，尤其在异步渲染或重排后 - 别忘了给容器加
scroll-behavior: smooth，否则scrollBy的behavior: 'smooth'在部分 Safari 版本下会降级为普通滚动
滚动性能陷阱：别在 scroll 事件里读写 scrollTop
每次读取 scrollTop 都会强制同步触发 layout，连续滚动时极易掉帧。长列表中监听 scroll 并实时计算位置，卡顿非常明显。
- 优先用
IntersectionObserver替代scroll事件做视口判断，它不触发 layout - 如必须响应滚动位置，用
getBoundingClientRect()替代scrollTop + offsetTop计算，它不触发强制重排 - 按钮驱动滚动（如“下一页”）时，用
scrollBy()而非维护scrollTop状态，避免因初始值错乱导致跳跃 - 边界判断不能只看整数：用
container.scrollTop 判断是否到顶，<code>container.scrollTop > container.scrollHeight - container.clientHeight - 0.5判断是否到底，应对 subpixel 渲染
滚动行为本质是浏览器手势分发与合成层归属问题，CSS 层面的声明（如 touch-action、overscroll-behavior-y）比 JS 拦截更底层、更可靠。很多“卡住”“不跟手”的问题，根源不在 JS 写得不够勤，而在容器没告诉浏览器“该怎么滚、能不能传出去”。
