### [原生滚动条样式：两套写法必须并行](https://www.huociguo.com/article/1542)

**Published:** 2026-09-30T05:30:10

**Author:** 米了

**Excerpt:** WebKit 用伪元素定制，Firefox 用两个标准属性定制，两者互不通用。含并行写法、作用位置与三条不要做…

自定义滚动条没有统一标准。WebKit 系浏览器用一整套伪元素，Firefox 用两个属性，两者互不通用，只写一套在另一类浏览器里等于没写。

![笔记本电脑屏幕上显示网页，用于说明滚动条样式的实际效果](https://api.huociguo.com/wp-content/uploads/2026/09/c5.jpg)

滚动条样式必须写在真正产生滚动的容器上

## 两套写法

```css
/* WebKit 与 Blink */
.panel::-webkit-scrollbar { width: 10px; }
.panel::-webkit-scrollbar-track { background: #f1f3f5; }
.panel::-webkit-scrollbar-thumb {
  background: #adb5bd;
  border-radius: 5px;
}
.panel::-webkit-scrollbar-thumb:hover { background: #868e96; }

/* Firefox */
.panel {
  scrollbar-width: thin;
  scrollbar-color: #adb5bd #f1f3f5;
}
```

两套写法互不冲突，可以放在同一条规则里。Firefox 只提供宽度与配色两个维度，做不到滑块圆角与悬停渐变，接受这一差异比强行统一更省事。

## 作用位置

-   选择器要落在真正产生滚动的容器上，写在 body 或 html 上对内层容器无效；
-   容器必须确实溢出：没有 overflow 取值为 auto 或 scroll，伪元素不会生成；
-   伪元素要成对定义，只写 thumb 时 track 会沿用系统默认外观。

## 三条不要做

1.  不要用 `::-webkit-scrollbar { display: none }` 彻底隐藏。触屏设备与键盘用户失去滚动位置参照，scrollbar-width: none 同理。
2.  不要把滑块做得过窄。8px 是兼顾可点击与视觉的分界线，窄于 6px 时鼠标很难抓到。
3.  不要引入 JS 模拟滚动条替代表现。原生滚动保留惯性、键盘与无障碍行为，模拟方案需要把这些逐一补回。

## 兼容边界

iOS Safari 与部分内置 WebView 不支持自定义滚动条属性，会沿用系统样式。样式声明不会报错，只是不生效，不需要为这类环境准备降级代码。

**Tags:** CSS伪元素, 样式作用域, 浏览器差异, 滚动条样式, 视觉效果

**Categories:** HTML5

---