自定义 scrollbar 滚动条样式

纯 CSS 实现

支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)
  • ::-webkit-scrollbar— 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

具体例子:codepen custom scrollbar

Firefox
  • scrollbar-color - 设置滚动条轨道和拇指的颜色
  • scrollbar-width - 设置滚动条出现时的厚度
/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> values
第一种颜色应用于滚动条拇指,第二种颜色应用于滚动条轨道
*/
scrollbar-color: rebeccapurple green;

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

JS实现(跨浏览器支持)

使用JS库,例如:simplebar
另外,Das Surma 提供了一种 custom scrollbar( CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar),使用 CSS矩阵 构建滚动条,JS 不用来实现滚动功能(有助于性能),而是用于设置 CSS。

例子:Custom Scrollbar Example from Google Chrome Labs

参考资料:

阅读 665

推荐阅读