chrome/edge可用::-webkit-scrollbar实现纯白极简滚动条，需设track和thumb均为#fff、无边框圆角阴影；firefox需用scrollbar-width:thin与scrollbar-color:#fff #fff；safari移动端完全不支持自定义。
Chrome / Edge 里用 ::-webkit-scrollbar 配置白底滚动条
现代 Chromium 内核浏览器（Chrome、Edge、新版 Opera）支持伪元素 ::-webkit-scrollbar 系列，这是目前唯一能精细控制滚动条样式的标准途径。纯白色极简效果的关键是：隐藏轨道阴影、抹平圆角、去掉边框、把滑块做成无边距的纯白矩形。
实操建议：
- 必须给
::-webkit-scrollbar-track设置background-color: #fff，否则默认是浅灰带阴影，破坏“纯白”感 -
::-webkit-scrollbar-thumb要同时设background-color: #fff和border: 1px solid #fff（不是 transparent），否则在高缩放或 Retina 屏下边缘可能发虚或透出底色 - 务必加
border-radius: 0和box-shadow: none，否则 macOS 或 Windows 的默认圆角/投影会残留 - 宽度建议设为
width: 8px（垂直）/height: 8px（水平），再窄容易点不中，再宽就偏离“极简”定位
body {
scrollbar-width: none; /* Firefox 临时兜底，见下节 */
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 0;
}
*::-webkit-scrollbar-thumb {
background-color: #fff;
border: 1px solid #fff;
border-radius: 0;
box-shadow: none;
}
Firefox 需要 scrollbar-width + scrollbar-color 组合
Firefox 不支持 ::-webkit-scrollbar，它只认 CSS 原生属性 scrollbar-width 和 scrollbar-color。但注意：scrollbar-width: none 会彻底隐藏滚动条（仅保留滚动能力），而你要的是“可见的纯白滚动条”，所以必须用 scrollbar-width: thin 配合 scrollbar-color。
实操建议：
-
scrollbar-color接两个颜色值：第一个是滑块（thumb），第二个是轨道（track）——顺序不能反，且都得填#fff -
scrollbar-width: thin是目前最接近“极简”的选项；auto太宽，none不可见 - 这两个属性必须写在根元素（如
html或body）上才生效，子元素设置无效 - Firefox 不支持圆角、边框等微调，所以“纯白”靠颜色，“极简”靠
thin本身
html {
scrollbar-width: thin;
scrollbar-color: #fff #fff;
}
为什么全局用 * 选择器配 ::-webkit-scrollbar？
因为 ::-webkit-scrollbar 伪元素不继承，也不冒泡，它只作用于“有滚动行为”的元素。如果只写 body::-webkit-scrollbar，那 div.overflow-auto 里的滚动条就还原成默认样式。
常见错误现象：
- 页面主滚动条是白的，但弹窗里一个
max-height: 300px; overflow-y: auto的列表滚动条还是灰色 - 用了
html::-webkit-scrollbar，但没生效——因为 html 元素本身通常不滚动，真正滚动的是body或局部容器
所以直接上 *::-webkit-scrollbar 最省事。虽然略重，但在小到中型项目里性能影响可忽略；若真有性能顾虑，可限定为 body, [data-scrollable]::-webkit-scrollbar 并手动加 data-scrollable 属性。
移动端 Safari 完全不支持任何自定义滚动条
iOS / iPadOS 的 Safari 无视 ::-webkit-scrollbar 和 scrollbar-* 所有属性。它永远显示半透明磨砂质感的浅灰滚动条，且无法隐藏或换色。
这意味着：“纯白色极简滚动条”在 Safari 移动端本质不可实现。你能做的只有两件事：
- 接受现状，不加任何滚动条样式（避免 PC 端和移动端表现割裂）
- 若强求视觉一致，改用 JS 滚动库（如
simplebar或overlay-scrollbars），但会增加包体积、可能干扰原生手势、且需额外处理 touch 事件穿透
别试图用 -webkit-appearance: none 或 overflow: overlay 欺骗 Safari——这些早已被移除或无效。
真正难的不是写对那几行 CSS，而是意识到：所谓“统一滚动条样式”，在跨浏览器场景下本质是个幻觉。Chrome 可控，Firefox 有限可控，Safari 完全不可控。选哪条路，取决于你愿为视觉一致性付出多少兼容性代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
