css 修改页面默认滚动条样式方法

滚动条样式设置

假设会出现滚动条的元素类名为 “scrollbar-box”（替换为自己实际使用的元素类名），滚动条样式设置示例如下：

.scrollbar-box::-webkit-scrollbar {
    
    
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  border-radius: 2px;
}
.scrollbar-box::-webkit-scrollbar-thumb {
    
    
  /*滚动条里面小方块*/
  width: 4px;
  height: 80px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.scrollbar-box::-webkit-scrollbar-track {
    
    
  /*滚动条里面轨道*/
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

没有设置样式时，默认滚动条样式：

自定义样式后：