vue中修改滚动条样式
样式写在 `APP.vue` 中,可以用在全局,如果只用在那个盒子中,只需要在`::`前面加上盒子的class名就可以
这是一个在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 隐藏滚动条样式
