css设置滚动条的样式

.main {
xxx...
&::-webkit-scrollbar { // width是设置垂直方向上的滚动条的宽度,height是设置水平方向上的滚动条的宽度
width: 10px;
}

&::-webkit-scrollbar-thumb { // 滑块的样式
  border-radius: 5px;
  background: #c2c2c2;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
  border: 5px solid transparent;
}

&::-webkit-scrollbar-track { // 滑动的轨道
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
  border: 5px solid transparent;
}

}

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