1. 程式人生 > >修改滾動條的樣式

修改滾動條的樣式

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