局部滚动容器必须设固定高度并配 overflow-y: auto 才能生效；scroll-behavior: smooth 需作用于该容器本身，且需满足内容溢出前提；监听 scroll 事件须绑定到容器，javascript 滚动应优先用 scrollto()。
局部滚动容器必须设固定高度 + overflow-y: auto
没有高度，就不可能产生滚动上下文。浏览器只会在内容实际溢出容器时才触发滚动机制，overflow-y: auto 本身不会“创造”可滚动空间——它只是告诉浏览器“如果溢出了，就显示滚动条”。
常见错误包括：
- 只写
min-height或height: 100%（父级没高度时计算为 0） - 用
%单位但父容器高度未显式定义 - Flex 子项没加
flex-shrink: 0，被压缩塌陷 - 误以为
overflow: hidden能“配合滚动”，其实它直接禁掉所有滚动能力
推荐用 px、vh 或 rem，比如：height: 400px 或 max-height: 70vh；再配 overflow-y: auto（比 overflow: auto 更精准，避免意外横滚）。
scroll-behavior: smooth 必须作用于滚动容器本身
想让局部滚动变丝滑，scroll-behavior: smooth 得加在那个带 overflow-y: auto 的容器上，不是 html 或 body。加错地方就完全无效。
注意几个硬性前提：
- 该元素必须已满足“有高度 + 内容溢出”的条件，否则平滑滚动无从谈起
- iOS Safari 15.4 之前对局部容器的
scroll-behavior支持有 bug，scrollIntoView({ behavior: 'smooth' })可能失效 - 用户开启系统“减少运动”偏好（
prefers-reduced-motion: reduce）时，该属性自动退化为瞬跳，这是标准行为，无需绕过 - 若 JS 后续又强制改了
scrollTop（比如重置位置），会打断正在进行的平滑动画
监听局部 scroll 事件必须绑定到容器，不是 window
写 container.addEventListener('scroll', handler) 才对；绑在 window 上监听不到局部滚动。
调试时先确认三值：container.scrollHeight、container.clientHeight、container.scrollTop。如果前两者相等或 scrollTop 始终为 0，说明根本没形成可滚动区域。
容易干扰事件派发的情况：
- 容器或其父级用了
transform、will-change或contain: layout/paint - 移动端 WebView 中，某些安卓版本对局部
scroll事件支持不稳定 - Vue/React 组件中，DOM 渲染未完成就去绑事件，
clientHeight可能还是 0
节流建议用 requestAnimationFrame 包一层，只读不写，把耗时逻辑移出回调。
JavaScript 控制局部滚动优先用 scrollTo()，别碰 scrollTop = 0
container.scrollTo({ top: 0, behavior: 'smooth' }) 是最干净、兼容性最好（IE11+）的方式。不要写 container.scrollTop = 0 再补平滑——它不支持动画，只能同步跳。
用 scrollIntoView 实现“回顶”是绕远路：
- 得额外加一个
<div id="top-anchor"></div>占位 - 若容器有
scroll-padding-top，停靠位置会偏移 - 动态渲染场景下，锚点可能还没挂载，调用静默失败
真正要注意的细节是：调用前务必检查 container.contains(target)（如果是跳转目标），否则在目标不在容器内时，scrollTo 会失败且无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
