修改浏览器滚动条样式

修改浏览器滚动条样式

有的时候在使用浏览器默认的滚动条会显得很难看，而且与页面整体的色调也不搭配，这种时候，我们需要对浏览器的默认滚动条进行修改。

::-webkit-scrollbar {
  //滚动条部分的大小宽度和背景
  width: 6px;
  height: 6px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  // 滚动条内部，滑动部分的颜色
  background: transparent;
  border-radius: 4px;
}

:hover::-webkit-scrollbar-thumb {
// 滚动条内部，滑动部分的颜色,鼠标悬浮的时候显示
  background: hsla(0, 0%, 53%, 0.4);
}

:hover::-webkit-scrollbar-track {
  // 滚动条的轨道，外层不动的滚动条容器
  background: hsla(0, 0%, 53%, 0.1);
}
::-webkit-scrollbar-button{
  // 滚动条两端的按钮设置
}

常用的就是上面这几个，还有几个不常用的，大家可以试着自己去试试，

::-webkit-scrollbar-track-piece 滚动条在没有滑块的时候显示样式
::-webkit-scrollbar-corner 滚动条的交汇处的设置
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件，例如textarea

此种方法是设置整个页面的滚动条样式，如果要设置某一个元素的滚动条样式，在前面加上元素类名即可