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 隐藏滚动条样式