CSS 设置滚动条样式的实例代码

下面是详细讲解“CSS 设置滚动条样式的实例代码”的完整攻略：

1. CSS 设置滚动条样式的原理

在 CSS 中，我们可以通过 ::-webkit-scrollbar 伪元素选择器以及一些属性来调整滚动条的样式。

2. 滚动条样式基础

第一步，我们可以使用 ::-webkit-scrollbar 选择器来选中滚动条。比如说，我们可以改变滚动条的宽高、颜色等属性。下面是一个例子：

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

/* 设置滚动条颜色 */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* 设置滚动条被按住时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

3. 自定义滚动条样式

为了让滚动条更加美观，我们可以自定义更多的样式。下面是两个示例：

3.1 扁平化滚动条

首先，我们可以将滚动条去掉圆角，改为扁平化的样式。代码如下：

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

/* 滚动条底部轨道 */
::-webkit-scrollbar-track {
  background: #F0F0F0;
}

/* 设置滚动条上方按钮的背景色 */
::-webkit-scrollbar-button {
  background-color:#ccc;
  display:block
}

/* 滚动条-thumb */
::-webkit-scrollbar-thumb {
  background: #999;
  border: 1px solid #ccc;
  border-radius: 3px;
}

::-webkit-scrollbar-corner {
  background-color:#ccc;
}

3.2 渐变效果的滚动条

我们也可以通过添加渐变效果来制作更加美观的滚动条样式。代码如下：

/* 滚动条 */
::-webkit-scrollbar {
    width: 9px;
    background-color: #f5f5f5;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

/* 滚动条轨道中间的箭头 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,#dadada, #7b37ff);
    border-radius: 5px;
    border: none;
    height: 50px;
}

/* 滚动条底部轨道 */
::-webkit-scrollbar-button {
    display: block;
    height: 40px;
}

/* 滚动条的底部按钮 */
::-webkit-scrollbar-button:vertical:decrement{
    background: linear-gradient(to bottom ,#dadada, #7b37ff); 
}

/* 滚动条的顶部按钮 */
::-webkit-scrollbar-button:vertical:increment{
    background: linear-gradient(to bottom, #7b37ff, #dadada); 
}