修改滚动条的样式

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;
}
 
  
 
 

猜你喜欢

转载自www.cnblogs.com/hdff/p/10208463.html