.main-box::-webkit-scrollbar {
/*滚动条整体样式*/
width : 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.main-box::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.main-box::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
------全局滚动条 包括elment ui 直接复制进去就完事儿
::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: white;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0px white;
-webkit-box-shadow: inset 0 0 0px white;
background-color: rgb(193, 193, 193);
/*滚动条的背景颜色*/
border-radius: 20px;
}
/*解决表格固定列时的压样式问题*/
.el-table__fixed {
height: calc(100% - 7px) !important;
}
.el-table__fixed-right {
height: calc(100% - 12px) !important;
}
.el-table__fixed-right::before,
.el-table__fixed::before {
background-color: unset !important;
}
----------------------
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #c1c1c1;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
浏览器滚动条修改
于 2021-09-08 18:22:25 首次发布