多个区域同时局部滚动需为每个容器显式设置固定高度与overflow-y: auto，避免body干扰；自定义滚动条仅webkit有效；移动端需-webkit-overflow-scrolling: touch；scroll-behavior: smooth须设于容器而非body。
多个区域同时局部滚动，核心是让每个容器拥有独立的滚动上下文，互不干扰。不能依赖 body 或 html 的全局滚动，必须为每个目标区域显式设置尺寸与溢出行为。
每个容器必须有明确 height + overflow-y: auto
这是最常被忽略的基础条件：没有固定高度，overflow 不会触发滚动条。浏览器不会“猜”你想要滚动——它只在内容撑出容器时才启用滚动机制。
-
height不能是auto或未设置；推荐用vh、px或flex布局约束（如flex: 1） -
overflow-y: auto比scroll更合理：只在需要时显示滚动条，避免永远显示空条 - 若父容器是
display: flex，子项需加min-height: 0防止 flex 伸缩破坏高度约束（尤其在 Firefox 中）
自定义滚动条样式只对 -webkit- 内核生效
::-webkit-scrollbar 系列伪元素仅在 Chrome、Edge、Safari 中有效，Firefox 和旧版 IE 完全不支持。别把它当成跨浏览器方案。
- 必须写在具体容器选择器下，例如
.left::-webkit-scrollbar，不能只写::-webkit-scrollbar -
width控制垂直滚动条宽度，height控制水平滚动条高度（仅当启用overflow-x时可见） -
::-webkit-scrollbar-thumb:hover可用于提升交互反馈，但注意 iOS Safari 对 hover 支持不稳定 - Firefox 用户看到的是系统原生滚动条，无法用 CSS 覆盖；如需统一外观，得用 JS 库（如 SimpleBar），但会增加 bundle 体积和事件干扰风险
避免 body 滚动干扰局部滚动体验
当多个局部区域并存时，如果 body 本身还能滚动，用户快速滑动可能意外触发页面级滚动，导致局部区域“跳帧”或失去焦点。
- 全局禁用：
html, body { overflow-y: hidden; height: 100%; }—— 这是 Bootstrap 5 局部滚动方案的常用起点 - 确保所有局部容器高度之和 ≤ 视口高度，否则仍可能漏出 body 滚动；可用
calc(100vh - Xpx)精确减去 header/footer 高度 - 移动端需额外加
-webkit-overflow-scrolling: touch（iOS Safari 6–12），否则局部滚动卡顿；现代 iOS 已默认启用，但老项目仍需保留
scroll-behavior: smooth 只对 html 元素生效
如果希望某个局部区域内锚点跳转也平滑，比如点击内部 tab 切换到某段内容，scroll-behavior: smooth 必须设在该容器上，而不是 body 或通配符。
- 正确写法：
.scroll-section { scroll-behavior: smooth; } - 错误写法：
body { scroll-behavior: smooth; }—— Safari 直接忽略 - 该属性只影响原生
a[href="#id"]和element.scrollIntoView()，不影响scrollTop手动赋值 - 若容器内含动态加载内容，首次调用
scrollIntoView前需确保目标元素已渲染完成，否则滚动位置可能错位
真正难的不是写几行 overflow，而是理清滚动上下文层级：每个局部滚动容器都是一套独立的“小世界”，它的尺寸、溢出、吸附、平滑行为都要单独声明，且不能和父级滚动产生耦合。一旦混用 height: 100% 和未约束的 flex，就很容易陷入“为什么这个区域就是不滚动”的循环调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
