直播网站源码，修改el-table滚动条样式

直播网站源码，修改el-table滚动条样式

原生滚动条修改方式：

 

1

<br>/* ---滚动条公共样式--- */<br> <br>/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/<br>::-webkit-scrollbar {<br>  width: 8px;<br>  height: 8px;<br>}<br> <br>/*定义滚动条轨道 内阴影+圆角*/<br>::-webkit-scrollbar-track {<br>  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /*轨道阴影*/<br>  border-radius: 0px; /*轨道背景区域的圆角*/<br>   /*轨道的背景颜色*/<br>}<br> <br>/*定义滑块 内阴影+圆角*/<br>::-webkit-scrollbar-thumb {<br>  border-radius: 2px; /*滑块圆角*/<br>  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /*滑块外阴影*/<br>  background-color: rgba(136, 219, 255, 1); /*滑块背景颜色*/<br>}

​

vue3修改滚动条的方式：

 

1

<br>/* ---el-table滚动条公共样式--- */<br>.el-scrollbar {<br>  // 横向滚动条<br>  .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {<br>    opacity: 1; // 默认滚动条自带透明度<br>    height: 8px; // 横向滑块的宽度<br>    border-radius: 2px; // 圆角度数<br>     // 滑块背景色<br>    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影<br>  }<br>  // 纵向滚动条<br>  .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {<br>    opacity: 1;<br>    width: 8px; // 纵向滑块的宽度<br>    border-radius: 2px;<br>    background-color: rgba(136, 219, 255, 1);<br>    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);<br>  }<br>}

 

 以上就是 直播网站源码，修改el-table滚动条样式，更多内容欢迎关注之后的文章