自定义 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

参考资料：

• MDN: -webkit-scrollbar
• MDN: scrollbar-color
• MDN: scrollbar-width
• CSS Tricks: The Current State of Styling Scrollbars
• CSS Tricks: scrollbar
• CSS Deep-Dive: matrix3d() For a Frame-Perfect Custom Scrollbar
• Performant Parallaxing