# 自定义scrollbars

# 1. 说明

./images/scrollbar-parts.jpg

Scrollbar Thumb: 滑块，可以拖拽的部分

Scrollbar Track: 轨道

# 2. 示例

# 3. 语法

# 3.1. 尺寸

/* 全局设置 */

::-webkit-scrollbar {
  width: 10px; /* 垂直滚动条 */
  height: 10px; /* 水平滚动条 */  
}

# 3.2. 轨道

可以设置 background、shadow、border-radius、border

::-webkit-scrollbar-track {
  background-color: darkgrey;
}

# 3.3. 轨道

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

# 3.4. gutter

预留出滚动条的空间，避免滚动条的显示/隐藏导致容器宽度的变化。

兼容： Chrome v94+

值： auto（默认、不预留）、stable（预留）

.section {
  scrollbar-gutter: stable; 
}

# 4. 参考

本章目录