Chrome/Safari/Edge 用 ::-webkit-scrollbar 及其 track/thumb/corner 子部件定制；Firefox 用 scrollbar-width（thin/auto/none）和 scrollbar-color（滑块色 轨道色）定制。两套写法都加上即可覆盖主流浏览器。
最常见的需求其实是「隐藏滚动条但保留滚动」——给容器 ::-webkit-scrollbar { display: none } 同时 Firefox 写 scrollbar-width: none，用在移动端横滑列表上。注意隐藏后用户不知道能滚，建议保留半透明细条或加滑动提示。
<style> .box { width: 220px; height: 120px; overflow-y: auto; } .box::-webkit-scrollbar { width: 8px; } .box::-webkit-scrollbar-thumb { background: #4a9eff; border-radius: 4px; } .box::-webkit-scrollbar-track { background: #eee; } .hide::-webkit-scrollbar { display: none; } .hide { scrollbar-width: none; } </style> <div class="box">滚动styled滚动条<br>滚动条被美化成圆角蓝色<br><br>继续向下<br>再向下</div> <div class="hide">滚动条被隐藏，但仍然可以滚</div>