css：全局设置滚动条样式：鼠标移入才显示

创建一个css文件，设置全局滚动条样式，鼠标移入时才显示滚动条：

// 全局设置滚动条样式/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{width:8px;height:8px;background-color:transparent;}/*定义滑块内阴影+圆角*//* 鼠标hover的时候才显示滚动条 */:hover::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);background-color:rgba(0,0,0,0.2);}

全局引入该css文件即可。

需要注意的是，如果容器想要带滚动条，那么它本身要设置滚动overflow: auto;

否则全局设置滚动条也是无效的。

比如antd的table设置滚动条：

<a-table id="dataflowTable" ref="table" size="middle" :scroll="{x:true,y:350}" bordered :columns="columns":pagination="false" :dataSource="dataSource">

比如普通容器设置滚动条：

.imageview-box {width: 715px;height: 470px;overflow-y: auto;display: flex;justify-content: flex-start;align-content: flex-start;flex-wrap:wrap;}