网页设计中，自定义浏览器滚动条是提升用户体验和美化界面的一项重要技巧。通过CSS的伪元素和属性，我们能够轻松地调整滚动条的样式。以下是一些简单的步骤，教你如何设置浏览器滚动条。

滚动条

首先，我们使用::-webkit-scrollbar伪元素来选择Webkit内核浏览器（如Chrome、Safari）的滚动条。接着，我们通过width属性调整滚动条的宽度，使其更符合设计需求。这一步骤非常关键，因为宽度的调整可以在一定程度上影响用户的感知和交互。

/* 设置滚动条的宽度 */
::-webkit-scrollbar {
   width: 5px;
}

轨道

其次，使用::-webkit-scrollbar-track选择滚动条的轨道部分，通过background属性为轨道设置背景颜色。这有助于使滚动条在页面中更加协调和统一。

/* 滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

手柄

接下来，使用::-webkit-scrollbar-thumb选择滚动条的拖动手柄部分，通过background属性设置手柄的背景颜色。这一步可以为滚动条增添一些独特的个性，使其与整体设计风格更加契合。

/* 滚动条手柄的样式 */
::-webkit-scrollbar-thumb {
  background: #bec4c4;
}

手柄悬停

最后，通过::-webkit-scrollbar-thumb:hover选择手柄在悬停状态时的样式，通过调整background属性，为用户提供视觉反馈，增强交互体验。

::-webkit-scrollbar-thumb:hover {
   background: #555;
}

通过以上步骤，你可以轻松定制出一个独特且符合网站设计的浏览器滚动条。这种个性化的设计不仅能够提升用户对网站的印象，还能够改善用户在页面上的滚动体验。在实际应用中，根据网站的整体风格和需求，你还可以进一步调整滚动条的其他样式属性，以实现更加复杂和丰富的效果。

用场景

::-webkit-scrollbar 只支持WebKit的浏览器 (谷歌Chrome, 苹果Safari)可以使用。

全局样式

* {
  scrollbar-width: thin;
  // auto -浏览器默认滚动条宽度
  // thin -设置比默认滚动条更窄的宽度
  // none -隐藏滚动条，但是元素还可以滚动
  // **px -直接设置滚动条的宽度
}

// 垂直滚动条和水平滚动条相交的部分
::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

// 整个滚动条
::-webkit-scrollbar {
  width: 5px; // 宽度
  height: 5px; // 高度
  background-color: #a7b1c2; // 颜色
}

// 滚动条上的滚动滑块。
::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

// 滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

// 滚动条轨道
::-webkit-scrollbar-track {
  display: none;
}

// 滚动条没有滑块的轨道部分。
::-webkit-scrollbar-track-piece {
  display: none;
}

// 右下角拖动块（如：textarea的可拖动按钮）
::-webkit-resizer {
  background: #991d28;
}

局部样式