# 在 base.css 中加入该样式

# 一、样式一【推荐】

box-shadow 方式

	::-webkit-scrollbar {
	width: 8px;
	height: 6px;
	}

	::-webkit-scrollbar-thumb {
	border: 1px solid rgb(0 0 0 / 0%);
	border-radius: 10px;
	box-shadow: 6px 0 0 #e3e3e3 inset;
	}

	::-webkit-scrollbar-thumb:hover {
	box-shadow: 6px 0 0 #e3e3e3 inset;
	}

# 二、样式二

	::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	}
	::-webkit-scrollbar-track {
	background: none;
	/* background: rgb(239, 239, 239); */
	}
	::-webkit-scrollbar-thumb {
	background: #999999; /* #bfbfbf */
	border-radius: 10px;
	}

# 三、样式三

	/* 全局滚动条样式 */
	::-webkit-scrollbar {
	width: 5px;
	height: 14px;
	}

	::-webkit-scrollbar-thumb {
	/* background-color: #01c8dc;
	border-radius: 3px; */
	background-color: #b6b6b6;
	}
	/* 全局滚动条样式结束 */

如果想局部的话就在想要改变滚动条样式的 vue 文件中写上 CSS 样式即可。

# 表格限高需要修改的滚动条样式

	/* el-table 滚动条样式 */
	.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
	width: 10px;
	}

	.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.2);
	}

	.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	}

	.el-table__header-wrapper .has-gutter th:nth-last-child(2) {
	border-right: 0;
	}
	/* el-table 滚动条样式结束 */