::-webkit-scrollbar仅在WebKit/Blink浏览器生效，Firefox需用scrollbar-width和scrollbar-color；iOS Safari完全不支持。
Chrome/Firefox里::-webkit-scrollbar为什么没效果
因为这个伪元素只在基于WebKit/Blink的浏览器（Chrome、Edge、Safari）中生效，Firefox完全不支持——它用的是scrollbar-width和scrollbar-color这两个CSS属性。直接写::-webkit-scrollbar却忽略Firefox，滚动条在火狐里就退回丑陋原生样式。
实操建议：
- 必须同时写两套：一套
::-webkit-scrollbar系列伪元素（::-webkit-scrollbar-track、::-webkit-scrollbar-thumb等），一套Firefox专用的scrollbar-width（取值auto/thin/none）和scrollbar-color（thumb-color track-color） -
::-webkit-scrollbar本身没有宽高，必须显式设置width或height（横向滚动时用height），否则后续子伪元素无法渲染 - Firefox的
scrollbar-color不支持圆角、阴影、渐变，只能填纯色；而WebKit系可以完整控制thumb的border-radius、background甚至transition
如何让滚动条始终显示，而不是悬停才出现
默认滚动条是“悬停显示”或“自动隐藏”的，尤其macOS下惯性滚动后会淡出，导致用户找不到拖拽位。想强制常驻，得打破平台默认行为。
实操建议：
- WebKit系：给容器加
overflow: overlay（已废弃但仍有部分效果），更可靠的是用overflow: auto+::-webkit-scrollbar并确保thumb的opacity不为0，且min-height/min-width足够（比如min-height: 40px） - Firefox：设
scrollbar-width: thin，它比auto更倾向常驻；再配合scrollbar-color明确指定颜色，避免退回到厚原生条 - 注意：iOS Safari完全不支持任何自定义滚动条API，所有CSS都会被忽略——别在这上面浪费时间
::-webkit-scrollbar-thumb的背景渐变或边框失效怎么办
常见现象是写了background: linear-gradient(...)或border: 2px solid #ccc，但实际渲染出来还是灰色方块。根本原因是thumb伪元素不继承父容器的transform、filter，且某些CSS属性被浏览器内部重置。
实操建议：
- 必须重置
background-clip和border-radius：很多情况下border-radius没生效是因为父容器有overflow: hidden裁切，而thumb本身没设border-radius，要单独加 - 渐变背景要配
background-clip: content-box，否则可能被padding区域遮盖；如果还无效，试试把background换成background-image，绕过某些渲染bug - 避免在thumb上用
box-shadow：部分Chrome版本会忽略，改用background模拟阴影（比如多一层深色渐变）更稳
自定义滚动条影响性能或导致页面抖动
尤其在内容动态加载、高度频繁变化的列表页（如聊天窗口、无限滚动），滚动条宽度变化会触发重排，造成卡顿或跳动。
实操建议：
- 滚动条宽度变化本质是容器
padding或margin被挤占，所以优先用padding-right预留空间，而不是依赖滚动条自动出现/消失来调整布局 - 禁用
scrollbar-gutter（实验性属性）：某些场景下它会主动插入空白区，反而引发抖动；目前兼容性差，建议不用 - 如果必须动态切换样式（如暗黑模式），不要用JS批量操作
style，改用预设CSS class切换，靠transition: background-color .2s这类轻量属性做过渡
滚动条样式看似只是视觉细节，但它横跨三套渲染逻辑（WebKit/Firefox/移动端），且和布局、性能、可访问性都咬合得很紧。最容易被忽略的是iOS Safari的零支持——你调得再精致，在iPhone上也看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
