修改滾動條的樣式
阿新 • • 發佈:2019-01-02
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;
}