局部滚动容器必须显式设置 scroll-behavior: smooth，且需满足固定高度+overflow声明；scrollintoview 应作用于目标元素而非容器本身；scroll-margin-top 可解决固定头部遮挡问题；兼容性不足时需用 requestanimationframe 手写缓动动画。
局部滚动容器必须显式设置 scroll-behavior: smooth
全局 html { scroll-behavior: smooth } 对局部容器无效，哪怕它父级有该样式也不会继承。平滑滚动行为只作用于「自身可滚动」的元素，且必须直接写在该元素上。
常见错误是给 .list 加了 overflow-y: auto 却忘了加 scroll-behavior，结果滚动依然生硬。
- 容器需满足两个硬性条件：有固定高度（或 max-height）+
overflow: auto/scroll/overlay - 不能只靠
display: block或内容溢出自动触发滚动——必须显式声明overflow - 若容器内子元素用了
transform或position: absolute布局，要确认其未意外截断滚动上下文（比如父级overflow: hidden）
scrollIntoView 在局部容器里不生效？检查调用对象
对局部容器调用 scrollIntoView 是无效的——这个方法永远作用于最近的可滚动祖先，不是你传进去的那个容器本身。
正确做法是：先获取目标元素，再调用它的 scrollIntoView，浏览器会自动向上查找并滚动到它所在的最近可滚动父容器（只要该容器设置了 scroll-behavior: smooth）。
- 错误写法：
document.querySelector('.chat-history').scrollIntoView({ behavior: 'smooth' })—— 它只会尝试把整个.chat-history滚进视口，不是滚动它的内容 - 正确写法：
document.querySelector('.new-message').scrollIntoView({ behavior: 'smooth', block: 'end' }) - 若目标元素是动态插入的（如 WebSocket 收到消息后 append），务必等 DOM 更新完成后再调用，否则静默失败
局部滚动 + 固定头部遮挡？用 scroll-margin-top 而非 JS 计算偏移
局部容器里某个标题被顶部 sticky 导航盖住，不是因为滚动错了，而是默认对齐方式把目标顶部贴到了容器顶部。手动 JS 算 offset 容易错，且响应式下难维护。
- 给目标元素加
h3[id] { scroll-margin-top: 60px; }，值等于局部容器内固定头的高度 - 支持
clamp()：scroll-margin-top: clamp(40px, 6vh, 72px)，适配小屏和大屏 -
scroll-margin-top只对scrollIntoView和锚点跳转生效，对scrollTop或scrollTo无效 - 别误用
scroll-padding-top——那是给整个视口设的，和局部容器无关
兼容性差或需要自定义缓动？降级用 scrollTo + requestAnimationFrame
scroll-behavior: smooth 在 iOS Safari 15.4 以下、所有 IE、部分安卓 WebView 中完全不支持。如果项目必须覆盖这些环境，就得手写动画逻辑。
- 核心思路：用
requestAnimationFrame分帧更新容器的scrollTop，配合缓动函数（如easeInOutCubic）模拟平滑效果 - 不要直接改
scrollTop后等待——它会立即生效，失去动画感；必须控制每帧增量 - 注意节流：用户快速点击多次，要取消前一次动画，避免并发冲突
- 第三方库如
smooth-scroll或scroll-into-view-if-needed可减少重复劳动，但需确认它们是否支持局部容器场景
scroll-behavior 不会“传染”给它的子容器，每个可滚动区域都得单独声明；而且一旦用了自定义 JS 滚动，就别再混用 scroll-behavior，否则行为不可预测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
