修改滚动条的样式

1.滚动条设置为透明（less语法）

.scrollbar() {
  &::-webkit-scrollbar {
    width: 0.16rem;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.08rem;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0);
  }
  /*滚动条的上下两端的按钮*/
  &::-webkit-scrollbar-button {
    height: 0px;
  }
}

2.设置有颜色的滚动条

&::-webkit-scrollbar {
       width: 0.16rem;
       background: rgba(117, 180, 253, 0.2);
       box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(1, 69, 132, 0.5);
       border-radius: 0.08rem;
 }
&::-webkit-scrollbar-track {
       background-color: transparent;
 }

&::-webkit-scrollbar-thumb {
       border-radius: 0.08rem;
       background: rgba(138, 191, 253, 1);
       box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0.4);
}
 /*滚动条的上下两端的按钮*/
       &::-webkit-scrollbar-button {
       height: 0px;
}

 

来源：https://www.cnblogs.com/hdff/p/10208463.html