CSS更改默认滚动条的样式

简介：

        默认滚动条样式又宽又粗，不太美观。一般在网页布局时会将滚动条优化，加一些圆角、改颜色、改宽高等等，此时就需要更改默认滚动条的样式。

使用：

        将下面CSS代码放在全局CSS文件，全局滚动条的样式都会改为自定义设置的样式；

        只想修改局部某个页面的滚动样式，就在单独页面的样式文件更改。

代码：

// 滚动条
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

// 滚动条头
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: rgba(0, 21, 41, 0.2);
}

// 滚动条轨道
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(181, 164, 164, 0.2);
}

效果展示：

默认滚动条样式：

优化后滚动条样式：