overflow: auto 必须配合显式高度约束（如 max-height）才生效，否则容器自适应撑开、无法触发滚动；需搭配 overflow-y: auto 和 overflow-x: hidden，并为 WebKit/Firefox 分别定制滚动条样式。
滚动容器不是加个 overflow 就完事——它得能滚、能看、不卡、不崩，还得在 Chrome/Firefox/Safari 上表现一致。只写 overflow: auto 是底线，但离可用还差三步：触发条件明确、滚动条样式可控、移动端行为可靠。
滚动容器必须显式设尺寸 + overflow 才生效
常见错误是给一个没高度的 <div> 直接加 overflow-y: auto，结果内容撑开容器、滚动条压根不出现。
- 容器必须有**确定的高度约束**：用
height、max-height或flex: 1（父容器需有高度） -
overflow值不能是visible（默认值），至少为auto或scroll - 若只想要垂直滚动，推荐组合：
overflow-y: auto; overflow-x: hidden;，避免意外横向滑动 - Firefox 下若容器是
body或html，scrollbar-color才会起作用；但嵌套<div>必须自己设overflow触发滚动逻辑
::-webkit-scrollbar 只对带 overflow 的块级容器生效
全局写 html::-webkit-scrollbar 或 :root::-webkit-scrollbar 大概率无效——WebKit 不把根滚动条当普通伪元素处理，且该伪类不继承。
- 正确做法：先定义可滚动容器，比如
.chat-log { max-height: 400px; overflow-y: auto; }，再写.chat-log::-webkit-scrollbar { width: 8px; } - 必须成套写全关键部分：
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb，漏掉track或thumb会导致回退到系统默认样式 -
::-webkit-scrollbar-thumb必须设background，透明或未设置 = 滑块不可见，用户拖不动 - 别在
thumb上设过大的border-radius（如 >50% 宽度），某些 Chrome 版本会渲染错位
Firefox 滚动条定制仅靠 scrollbar-width + scrollbar-color
Firefox 完全无视 ::-webkit-scrollbar，也**不支持轨道圆角、hover 动画、背景图等任何 WebKit 扩展能力**——只有两个属性可调，且有硬性限制。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-width只接受auto、thin、none三个值；设成thick或12px会被忽略，回退到默认宽度 -
scrollbar-color仅在scrollbar-width≠none时生效；格式固定为scrollbar-color: <thumb> <track>，顺序反了颜色就错乱 - 这两个属性**只对根滚动容器（
html）或显式设置了overflow的块级元素有效**；对普通<div>加了也不起作用，除非它自己已触发滚动 - macOS Safari 用户若在系统偏好中开启了“自动隐藏滚动条”，CSS 设置会被强制覆盖——网页无权干预
隐藏滚动条但保留滚动功能要分浏览器处理
想让滚动条“看不见但摸得着”，不是统一设 display: none ——那会直接禁用滚动交互。
- Chrome/Edge/Safari：
::-webkit-scrollbar { width: 0; }或::-webkit-scrollbar-thumb { background: transparent; }（后者更稳妥，避免某些版本下轨道残留白边） - Firefox：
scrollbar-width: none;是唯一可靠方式；其他值或搭配scrollbar-color都无效 - ⚠️ 风险点：
overflow: overlay已废弃，不要用；overscroll-behavior: contain在 iOS Safari 上可能阻断手势滚动，测试时务必真机验证 - 移动端尤其注意：iOS Safari 对
scrollbar-width: none支持不稳定，部分 16.x 版本仍显示原生滚动条
最麻烦的不是写法，而是「谁在滚动」——html、body、还是某个 div？不同浏览器对滚动宿主的判定逻辑不同，一旦搞错，所有自定义规则都等于没写。建议从具体容器出发，而不是试图一劳永逸地接管整个页面滚动条。
