overflow: scroll 是强制常驻显示滚动条的唯一可靠方式，而“自动隐藏”实为css样式覆盖，并非浏览器原生功能；各浏览器需用不同方案（如firefox用scrollbar-width:none，webkit系需三个伪元素）且存在兼容性陷阱。
滚动条不会“自动隐藏”，所谓“自动隐藏”只是视觉上不可见，但滚动功能必须保留；常驻显示则需强制触发，不能依赖内容溢出自动判断。
overflow: scroll 是让滚动条常驻显示的唯一可靠方式
只要容器设置了 overflow: scroll，浏览器就会始终渲染水平或垂直滚动条（即使内容没溢出），灰色滑块不可拖动但占位稳定。这和 overflow: auto 的行为有本质区别：auto 由内容是否溢出动态决定显隐，无法保证常驻。
-
overflow-x: scroll强制显示横向滚动条，overflow-y: scroll强制显示纵向滚动条 - 在 flex 或 grid 容器中，若子项使用
min-width: 0或min-height: 0，可能抑制溢出检测，导致scroll仍不显示滚动条——此时需加white-space: nowrap（文本）或flex-shrink: 0（弹性项）辅助触发 - 移动端 Safari 对
overflow: scroll渲染不稳定，尤其在position: fixed容器内，可尝试加transform: translateZ(0)强制硬件加速修复
“自动隐藏滚动条”实际是跨浏览器样式覆盖
没有浏览器原生支持“鼠标移开就隐藏滚动条”的 CSS 行为。所谓“自动隐藏”，本质是用 CSS 把滚动条部件设为透明或零尺寸，同时确保滚动能力不受影响。关键不是“隐藏逻辑”，而是“怎么写才不翻车”。
- Firefox 必须用
scrollbar-width: none，写在html或body上无效，只能作用于有明确height和overflow: auto的子容器 - Chrome/Safari/Edge 必须同时设置三个伪元素：
::-webkit-scrollbar（设width: 0; height: 0）、::-webkit-scrollbar-track（background: transparent）、::-webkit-scrollbar-thumb（background: transparent）；漏掉任意一个，旧版 macOS Safari 可能 fallback 出默认滑块 - 别把
::-webkit-scrollbar写进@media或:hover里——Safari 15 之前不支持动态切换，写了等于白写
移动端 Safari 的滚动条控制最不可靠
iOS 16+ 开始，::-webkit-scrollbar 在很多场景下被忽略，尤其是 body 滚动或 position: fixed 弹层内。此时 scrollbar-width: none 是唯一能起效的方案，但它只管垂直滚动条，横向滚动仍可能意外出现。
- 如果目标是全屏滚动容器（如轮播图、侧边栏），优先用
touch-action: pan-y配合overflow-y: auto，避免触发系统级双滚动 - 测试时务必真机验证：模拟器里的滚动行为和 iOS 实际表现差异极大，特别是 touchpad 拖拽和惯性滚动
- 不要依赖 JavaScript 监听
scroll事件来 toggle 样式——滚动过程中频繁重绘会导致卡顿，且无法覆盖键盘方向键或触控板滚动
真正难的不是写几行 CSS，而是确认每个浏览器版本对同一段代码的实际响应。比如 scrollbar-width: none 在 Firefox 128 里没问题，但在某些企业定制版 Firefox 中可能被策略禁用；又比如 ::-webkit-scrollbar 在 Chrome 127 里 width: 0 生效，到了 Edge 128 却需要配合 display: block 才行。这类细节没法靠“通用写法”兜底，只能按目标环境逐个验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
