CSS设置更改滚动条样式

/*滚动条样式*/
.scroll::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar // 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button  // 滚动条两端的按钮
::-webkit-scrollbar-track  //  外层轨道
::-webkit-scrollbar-track-piece  //  内层滚动槽
::-webkit-scrollbar-thumb  // 滚动的滑块
::-webkit-scrollbar-corner  // 边角
::-webkit-resizer  // 定义右下角拖动块的样式

这样可以根据自己想要的样式去修改,而不用自带的样式了

你可能感兴趣的:(CSS设置更改滚动条样式)