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  // 定义右下角拖动块的样式

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容