局部滚动容器必须显式设置尺寸和overflow属性，缺一不可；需设width/height（或max-height）、overflow:auto或overflow-y:scroll，且scroll-behavior:smooth等行为属性须直接作用于该容器。
局部滚动容器必须显式设置 overflow 和尺寸
局部滚动不是“让某段内容能滚”就完事，而是要让浏览器明确知道：这是一个独立的、有边界的滚动上下文。缺一不可。
- 容器元素必须有
width和height（或max-height），不能靠内容撑开 - 必须设置
overflow: auto或overflow-y: scroll（仅纵向）；overflow: visible或未设值 = 不可滚动 -
overflow-x: hidden建议显式加上，避免意外横向滚动干扰体验 - 若用
flex或grid布局，父容器需设align-items: flex-start等，防止子项拉伸破坏高度约束
scroll-behavior: smooth 必须加在滚动容器本身上
很多人把 scroll-behavior: smooth 写在 html 或全局样式里，结果局部区域还是生硬跳转——因为该属性不继承，只对**直接负责滚动的元素**生效。
- 正确写法：
.chat-log { height: 400px; overflow-y: auto; scroll-behavior: smooth; } - 错误写法：
body { scroll-behavior: smooth; }或* { scroll-behavior: smooth; }—— 局部容器不会继承 - 若容器内元素是
display: none或尚未渲染（如v-if为 false），调用scrollIntoView()会静默失败 - Safari 15.4+ 支持
behavior: 'smooth'，旧版需降级为'auto'或用 JS fallback
滚动到底部自动跟随需手动触发，CSS 做不到
CSS 控制不了“新内容追加后是否自动滚到底”，这是常见误解。即使设置了 scroll-behavior: smooth，也不会自动响应 DOM 变化。
- 每次插入新内容后，必须显式调用：
container.scrollTop = container.scrollHeight - 若希望平滑滚动到底部：
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }) - 注意时序：确保元素已挂载、尺寸已计算（可用
requestAnimationFrame或offsetHeight触发重排后执行） - 避免在
scroll事件中反复设置scrollTop，否则可能引发抖动或卡死
自定义滚动条样式仅在 WebKit 内核有效
想美化局部滚动条？::-webkit-scrollbar 是唯一通用方案，但它只在 Chrome、Edge、Safari 生效，Firefox 和部分 WebView 完全无视。
- 必须写在滚动容器选择器下，例如：
.log-container::-webkit-scrollbar { width: 6px; } -
::-webkit-scrollbar-track控制轨道背景，::-webkit-scrollbar-thumb控制滑块 - 别依赖它做功能判断——隐藏/显示逻辑仍要靠
overflow和尺寸控制 - 移动端 iOS Safari 对自定义滚动条支持极弱，建议优先保证功能可用性，再考虑视觉增强
真正容易被忽略的，是局部滚动容器一旦嵌套在 transform、filter 或 will-change 元素内，其 scrollTop 行为可能异常，甚至完全失效。遇到滚动不响应，先检查父级是否有这些属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
