局部滚动容器不触发滚动条的主因是未形成BFC或被父级截断；scrollIntoView需作用于最近滚动祖先；自定义滚动条需按引擎分写且成套声明；禁用fixed，改用sticky或外提布局。
局部滚动容器不触发滚动条
最常见的现象是：给一个 div 设了 height: 300px; overflow-y: auto，但内容明明超长，滚动条就是不出现。根本原因不是 CSS 写错，而是容器没形成「块级格式化上下文（BFC）」或被父级截断。
- 确保该容器是块级元素（
display: block或默认值），不能是inline、inline-block（除非显式设vertical-align: top并配合高度） - 检查父容器是否设置了
overflow: hidden或overflow-x: hidden—— 它会直接剪掉子容器的滚动区域 - 若容器内有浮动子元素（
float: left），必须清除浮动（overflow: auto、clear: both或display: flow-root），否则高度塌陷，无法触发溢出 - 避免用
position: absolute把内容“拉出”容器边界，这会让浏览器误判内容未溢出
scrollIntoView 在局部滚动中失效
element.scrollIntoView() 默认作用于整个页面滚动（document.documentElement），对局部容器无效——除非你明确告诉它滚谁。
- 必须在目标元素的最近滚动祖先上调用：
scrollContainer.scrollTo({ top: target.offsetTop - scrollContainer.offsetTop })，或更稳妥地用target.scrollIntoView({ block: 'start', inline: 'nearest' })，但前提是scrollContainer是该target的可滚动祖先 - 如果容器用了
transform（如translateZ(0)），某些旧版 Chrome 会破坏scrollIntoView的坐标计算，临时方案是改用scrollTop手动算偏移 - 目标元素若被
v-if、ngIf或display: none隐藏，调用时静默失败；需确保 DOM 已挂载且可见后再执行
局部滚动条样式不生效（WebKit / Firefox 差异）
::-webkit-scrollbar 和 scrollbar-width 不是同一套机制，混用或错位声明会导致全盘失效。
-
::-webkit-scrollbar必须成套写：::-webkit-scrollbar+::-webkit-scrollbar-track+::-webkit-scrollbar-thumb，缺一不可；且只能加在滚动容器本身上，不能写在html或body -
scrollbar-width和scrollbar-color只在 Firefox 生效，且只认块级滚动容器（如.chat-log { scrollbar-width: thin; scrollbar-color: #666 #eee; }），写在* {}或html上无效 - iOS/macOS Safari 基本无视所有自定义滚动条规则，系统设置优先级更高；别指望
::-webkit-scrollbar-thumb:hover在移动端响应
局部滚动与 fixed 元素交互错乱
当局部容器内含 position: fixed 子元素时，会出现滚动时元素“悬浮抖动”或“卡在错误位置”，这不是 bug，而是 fixed 元素脱离文档流后，其定位基准仍为视口，而非滚动容器。
立即学习“前端免费学习笔记（深入）”；
- 绝对禁止在局部滚动容器内使用
position: fixed；改用position: sticky（需设top值）或position: absolute+ 父容器position: relative - 若必须固定某工具栏，应将其移出滚动容器，放在同级并用 flex/grid 布局对齐，而非嵌套在内部
- 遇到滚动中元素“错位漂浮”，加
transform: translateZ(0)到滚动容器本身可强制 GPU 加速，缓解渲染层错位，但治标不治本
滚动行为是否真正生效，永远取决于「谁在滚动」和「谁在被滚」——局部滚动不是全局滚动的缩小版，它是一套独立的滚动上下文，任何想当然的继承或复用都容易踩坑。
