Chrome/Edge用::-webkit-scrollbar{width:0;height:0}隐藏滚动条但保留滚动，Firefox用scrollbar-width:none，Safari在macOS需-webkit-appearance:none且iOS不支持隐藏。
Chrome / Edge（Blink内核）用 ::-webkit-scrollbar 隐藏但不禁用滚动
Chrome 和新版 Edge 默认显示滚动条，直接设 overflow: hidden 会禁掉滚动，必须保留 overflow: auto 或 scroll，再用伪元素隐藏视觉部分。
关键点是：只隐藏轨道和滑块，不碰 overflow 属性本身。
-
::-webkit-scrollbar必须声明宽度/高度为0，否则部分旧版 Chrome 仍占位 - 只设
display: none在某些版本中无效，width: 0+height: 0更可靠 - 若容器有
padding-right或margin-right，隐藏后可能造成内容被裁切，需额外加padding-right: 0校准
.scroll-container {
overflow-y: auto;
scrollbar-width: none; /* Firefox fallback，下面还会提 */
}
.scroll-container::-webkit-scrollbar {
width: 0;
height: 0;
}
Firefox 用 scrollbar-width: none 和 scrollbar-color
Firefox 不支持 ::-webkit-scrollbar，从 64+ 开始提供标准 CSS 属性控制滚动条显示。
scrollbar-width: none 是最简方案，但它只在 overflow 为 auto 或 scroll 时生效；设成 visible 就无效。
-
scrollbar-width只接受auto、thin、none，没有中间值 -
scrollbar-color可配滑块和轨道色，设为同色（如scrollbar-color: transparent transparent）也能“隐形”，但不如none干净 - 该属性不触发重排，性能比伪元素方案略优
.scroll-container {
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
Safari（WebKit）的兼容细节：iOS 和 macOS 行为不一致
Safari 桌面版（macOS）默认滚动条是“悬停显示”，所以即使不写任何样式，用户不拖也不 hover 时也看不到；但 iOS Safari 完全不渲染滚动条，且无法通过 CSS 控制——::-webkit-scrollbar 在 iOS 上被忽略。
- 不要对 iOS 做
::-webkit-scrollbar适配，它无效，还可能触发奇怪的渲染 bug - macOS Safari 若强制要“始终隐藏”，得配合
-webkit-appearance: none和width: 0，但仅限于自定义滚动容器（如div），原生body不适用 - 若用
overscroll-behavior: contain抑制回弹，可进一步减少 iOS 上误触滚动的感知
全局隐藏还是局部隐藏？优先用 class 而非 html 或 body
给 html 或 body 加滚动条隐藏样式风险很高：可能影响模态框、下拉菜单、第三方组件的内部滚动，尤其当它们依赖 position: fixed 或 transform 时。
- 只对明确需要隐藏滚动条的容器加 class，比如
.chat-history、.sidebar-menu - 避免使用
*::-webkit-scrollbar全局重置，它会污染所有第三方 UI 库的滚动区域 - 如果必须处理
body滚动（如全屏弹窗遮罩），建议 JS 动态增删 class，并同步设body { position: fixed; top: -${window.scrollY}px }防止页面跳动
真正麻烦的不是怎么写这几行 CSS，而是滚动条消失后，用户是否还能意识到那里可以滚动——尤其在无 hover 效果的触屏设备上。这点没法靠 CSS 解决，得靠设计信号（比如内容截断、箭头提示、轻微阴影）补足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
