直播平台开发，滚动条样式的修改和更换

直播平台开发，滚动条样式的修改和更换实现的相关代码

 

1

// IE浏览器<br>* {<br>  //三角箭头的颜色<br>  scrollbar-arrow-color: #c0c4cc;<br>  //滚动条滑块按钮的颜色*/<br>  scrollbar-face-color: #a2a2a3;<br>  //滚动条整体颜色*/<br>  scrollbar-highlight-color: #a2a2a3;<br>  //滚动条阴影*/<br>  scrollbar-shadow-color: #a2a2a3;<br>  //滚动条轨道颜色*/<br>  scrollbar-track-color: #f4f4f5;<br>  //滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色<br>  scrollbar-3dlight-color: #a2a2a3;<br>  //滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色<br>  scrollbar-darkshadow-color: #a2a2a3;<br>  //滚动条基准颜色<br>  scrollbar-base-color: #f4f4f5;<br>  scroll-padding-block: 6px;<br>}<br>// 谷歌浏览器<br>//  https://www.cnblogs.com/that-is-ok/p/10757282.html<br>//  https://www.jianshu.com/p/c2addb233acd<br>::-webkit-scrollbar {<br>  width: 16px;<br>  height: 16px;<br>}<br>/* Track */<br>::-webkit-scrollbar-track {<br>  /*滚动条里面轨道*/<br>  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);<br>  background: #ededed;<br>  border-radius: 10px;*/<br>}<br>/* Handle */<br>::-webkit-scrollbar-thumb {<br>  /*滚动条里面小方块*/<br>  border-radius: 12px;<br>  border: 5px solid rgba(255, 255, 255, 1);<br>  background: lightgray;<br>}<br>/* Handle on hover */<br>::-webkit-scrollbar-thumb:hover {<br>  background: darkgray;<br>}<br>// 如果想鼠标进入某个控件才显示滚动条的话，可以参考下面的代码写<br>// IE下隐藏<br>//.el-table__body-wrapper,<br>//.el-menu {<br>//  -ms-overflow-style: none;<br>//}<br>//.el-table__body-wrapper:hover,<br>//.el-menu:hover {<br>//  -ms-overflow-style: auto;<br>//}<br>// Chrome下隐藏<br>// .el-menu::-webkit-scrollbar,<br>// .el-table__body-wrapper::-webkit-scrollbar {<br>//   display: none;<br>// }<br>// .el-menu:hover::-webkit-scrollbar,<br>// .el-table__body-wrapper:hover::-webkit-scrollbar {<br>//   display: block;<br>// }

​

以上就是 直播平台开发，滚动条样式的修改和更换实现的相关代码，更多内容欢迎关注之后的文章