html滚动条设置，html滚动条代码-励北网

html滚动条设置，html滚动条代码。从下面这个基础的原生滚动条开始，带领大家一步步认识上面的各种伪元素：

html滚动条设置，html滚动条代码

上面矩形滚动区域的 HTML 结构为：

<div class="container">
  <div class="rect">
    <div class="box"></div>
  </div>
</div>

初始 CSS 样式为：

.container {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}
.rect {
  width: 600px;
  height: 600px;
  overflow: scroll;
  border: 1px solid gainsboro;
}
.box {
  width: 1000px;
  height: 1000px;
  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3
   0, #fb3 75%, #58a 0);
  background-size: 42.4264px 42.4264px;
  opacity: 0.2;
}

-webkit-scrollbar 伪元素

::-webkit-scrollbar代表整个滚动条，我们可以为其设置宽高、背景色、边框，例如：

.rect::-webkit-scrollbar {
  width: 50px;
  height: 50px;
  background-color: yellow;
  border: 5px solid green;
}

然后滚动条就变成了下面这个样子：

html滚动条设置，html滚动条代码

值得注意的是，对于自定义滚动条样式，这个伪类是必不可少的，如果没有设置 ::-webkit-scrollbar，那么下面所有其他的伪类都无法生效。所以该伪类的一个重要的作用就是告诉控制 webkit 引擎是否使用默认的滚动条样式。

另外需要特别强调的是，在 -webkit-scrollbar 伪类样式中，width 属性只对垂直滚动条起作用，height 属性只对水平滚动条起作用，而这个规则对下面的 -webkit-scrollbar-button则恰恰相反。

-webkit-scrollbar-button 伪元素

::-webkit-scrollbar-button伪元素表示滚动条两端的按钮区域。如果是垂直滚动条，按钮在上下两端；如果是水平滚动条，按钮在左右两端。该伪元素要配合以下六个伪类一起使用：

伪类	选中的状态
:horizontal	当滚动条处于水平方向
:vertical	当滚动条处于垂直方向
:decrement	当点击后减少滚动值
:increment	当点击后增加滚动值
:start	当处于开始位置
:end	当处于结束位置

我们增加以下 CSS 代码来设置滚动按钮样式：

.rect::-webkit-scrollbar-button {
  display: block;
  background-color: rgba(185, 28, 28, 0.8);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;
  height: 25px;
  width: 25px;
}
.rect::-webkit-scrollbar-button:vertical:start:increment {
  background-image: url("https://img.zlib.cn/blog/chevron-down.svg");
}
.rect::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("https://img.zlib.cn/blog/chevron-up.svg");
}
.rect::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("https://img.zlib.cn/blog/chevron-down.svg");
}
.rect::-webkit-scrollbar-button:vertical:end:decrement {
  background-image: url("https://img.zlib.cn/blog/chevron-up.svg");
}
.rect::-webkit-scrollbar-button:horizontal:start:increment {
  background-image: url("https://img.zlib.cn/blog/chevron-right.svg");
}
.rect::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("https://img.zlib.cn/blog/chevron-left.svg");
}
.rect::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("https://img.zlib.cn/blog/chevron-right.svg");
}
.rect::-webkit-scrollbar-button:horizontal:end:decrement {
  background-image: url("https://img.zlib.cn/blog/chevron-left.svg");
}

效果如下：

html滚动条设置，html滚动条代码