局部滚动容器必须同时设置 overflow 和 scroll-behavior 才生效，因 scroll-behavior: smooth 要求容器本身可滚动；需设明确高度及 overflow-y: auto/scroll，且 scroll-behavior 必须直接写在该容器上。
局部滚动容器必须同时设 overflow 和 scroll-behavior
只写 scroll-behavior: smooth 不生效，是因为浏览器要求该元素**本身可滚动**。常见错误是只加了样式却忘了给容器设尺寸和溢出行为。
- 容器需有明确高度（如
height: 400px）或最大高度（max-height） - 必须设置
overflow-y: auto或overflow: scroll（overflow: hidden不行） -
scroll-behavior: smooth要直接写在该容器上，不能靠父级继承 - 若用
overflow: overlay（macOS Safari 常见），部分旧版 Safari 可能不触发平滑行为，建议改用auto
scrollIntoView 在局部容器里会滚错目标
对子元素调用 element.scrollIntoView({ behavior: 'smooth' }) 默认作用于整个页面，不是你期望的父容器。这是最常被忽略的语义陷阱。
- 正确做法是：先拿到滚动容器
const container = document.querySelector('.log-container') - 再获取目标元素
const target = container.querySelector('.last-msg') - 最后调用
container.scrollTo({ top: target.offsetTop - container.scrollTop, behavior: 'smooth' }) - 如果容器有
padding或border，用target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop更可靠
动态内容加载后滚动失败，不是 bug 是时机问题
比如聊天记录追加新消息后立即调用 scrollTo，但 DOM 还没渲染完成，lastElementChild 可能还是旧节点，导致滚到一半就停住。
- Vue 用户应在
nextTick后执行；React 用户在useEffect或setState的回调里调用 - 原生 JS 可监听
MutationObserver，或用requestAnimationFrame延一帧再滚 - 避免连续快速触发：加个
isScrolling标志位，调用前检查，scrollend事件中重置（注意 Safari 不支持scrollend，需 fallback 到setTimeout） - 若目标元素由
display: none切换为可见，要等重排（reflow）完成后再滚，否则offsetTop返回 0
固定头部遮挡、滚动错位的真正解法是 scroll-margin-top
很多人手动减去导航栏高度来算 top 值，结果响应式下失效、缩放时偏移、或者被 transform 干扰。其实 CSS 已提供标准方案。
- 给目标元素加
scroll-margin-top: 60px（值等于 fixed 头部高度） - 响应式场景用
scroll-margin-top: clamp(50px, 8vh, 80px) - 这个属性只对
scrollIntoView和锚点跳转生效，对scrollTo无效 —— 所以局部滚动仍得靠手动计算偏移 - 别误用
scroll-padding-top：它是设在滚动容器上的，影响的是整个视口的“滚动边界”，不是单个目标的定位基准
局部滚动平滑不是加个 CSS 就完事，关键在滚动上下文是否被正确定义、目标位置是否在真实渲染后读取、以及遮挡逻辑是否交给标准属性而非手算。这三个点漏掉任意一个，都会导致“明明写了 smooth 却还是硬跳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
