vue中修改滾動條樣式

這是一個在VUE中的設置滾動條樣式的方法,該方法只適用於Chrome瀏覽器,親測在火狐不適用

樣式寫在 APP.vue 中,可以用在全局,如果只用在那個盒子中,只需要在::前面加上盒子的class名就可以

::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
::-webkit-scrollbar-thumb { //滑塊部分
  border-radius: 5px;
  background-color: rgb(175, 74, 240);
}
::-webkit-scrollbar-track { //軌道部分
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 5px;

}

如果把::-webkit-scrollbar的width和height設置為0,還可以起到隱藏滾動條的作用,不過上文提到過,這個方法只適用Chrome瀏覽器,如果想在其他瀏覽器隱藏滾動條,可以參考下來這篇文章

overflow 隱藏滾動條樣式