- /* ---el-table滚动条公共样式--- */
- .el-scrollbar {
- // 横向滚动条
- .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
- opacity: 1; // 默认滚动条自带透明度
- height: 8px; // 横向滑块的宽度
- border-radius: 2px; // 圆角度数
- background-color: rgba(136, 219, 255, 1); // 滑块背景色
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
- }
- // 纵向滚动条
- .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
- opacity: 1;
- width: 8px; // 纵向滑块的宽度
- border-radius: 2px;
- background-color: rgba(136, 219, 255, 1);
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
- }
- }
补充---原生滚动条样式修改:
- /* ---滚动条公共样式--- */
-
- /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
- ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
-
- /*定义滚动条轨道 内阴影+圆角*/
- ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /*轨道阴影*/
- border-radius: 0px; /*轨道背景区域的圆角*/
- background-color: transparent; /*轨道的背景颜色*/
- }
-
- /*定义滑块 内阴影+圆角*/
- ::-webkit-scrollbar-thumb {
- border-radius: 2px; /*滑块圆角*/
- -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /*滑块外阴影*/
- background-color: rgba(136, 219, 255, 1); /*滑块背景颜色*/
- }