vue-elementul右侧滚动条不显示，改变滚动条样式。elementul隐藏组件。不显示滚动条还可以滚动_vue右侧滚动条

效果图

看到了elementul官网滚动条是这样的，这是一个隐藏的组件，我们也可以用到自己的项目中，改变滚动条样式。

上代码

用法，el-scrollbar标签包裹住你想要改变滚动条的部分，比如只包裹左侧菜单栏，或者像我一样是直接包裹总的router-view，把所有的滚动条都改了。

html部分

    <el-scrollbar style="height:100%">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</el-scrollbar>
1
2
3
4
5
6
7

然后把样式复制过去，就可以了。
第一个样式调宽高，高基本不用动，宽度自己可以调，如果想要更窄或者看不到还能滚动，那可以设置宽度更小。
第二个样式调颜色和圆角之类的，颜色可以自己更改

css样式部分

//滚动条的样式
::-webkit-scrollbar {
  //滚动条宽高
width: 5px;
height: 10px;
}
::-webkit-scrollbar-thumb {
  //滚动条颜色和圆角
background-color: #dbd9d9;
border-radius: 3px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

就这样两步骤就可以实现功能啦。