el-scollbar样式修改
1、滚动条整体部分
使用 ::-webkit-scrollbar
::-webkit-scrollbar {
width: 10px;//修改滚动条宽度
}
2、滚动条中的滑块
使用 ::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #d2eafb;
}
3、滚动条中的外层轨道
使用 ::-webkit-scrollbar-track
::-webkit-scrollbar-track {
border-radius: 8px;
background: #eeeeee;
}
4、滚动条中的两端箭头按钮
使用 ::-webkit-scrollbar-button
::-webkit-scrollbar-button {
background: #eeeeee;
}
5、水平方向和垂直方向滚动条交接处
使用 ::-webkit-scrollbar-corner
::-webkit-scrollbar-corner {
background-color: transparent;
}
6、单独设置水平方向或垂直方向滚动条样式
水平方向上的滚动条::horizontal
垂直方向上的滚动条::vertical
//水平方向滚动条
::-webkit-scrollbar:horizontal {
width: 10px;
}
//垂直方向滚动条
::-webkit-scrollbar:vertical {
width: 20px;
}
隐藏滚动条
.workbench-create {
height: 100%;
display: flex;
.left-wrap {
height: 100%;
overflow: auto;
flex: 1;
padding-left: 40px;
//隐藏元素的滚动条。这通常用于自定义滚动条样式。
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
&::-webkit-scrollbar {
//伪元素选择器,用于选择Webkit浏览器(如Chrome、Safari等)中的滚动条。
display: none;
/* Chrome Safari */
}
.right-wrap {
height: 100%;
width: 200px;
padding-top: 40px;
padding-right: 40px;
margin-left: auto;
}
}
<1>
/* 设置滚动条的样式 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条滑块 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,.1);
cursor: pointer;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,.1);
}
// 处理有x滚动条时高度遮挡滚动条
.el-table--scrollable-x {
.el-table__fixed,.el-table__fixed-right {
height: calc(100% - 8px) !important;
}
}
// 存在滚动条的时候在right
.el-table--scrollable-y {
.el-table__fixed-right {
right: 8px !important;
}
}
// 解决修改滚动条底部不对齐问题
.el-scrollbar__wrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<2>
.el-table .el-table__body-wrapper::-webkit-scrollbar {
width: 5px;
/*滚动条宽度*/
height: 5px;
/*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
// .el-table .el-table__body-wrapper::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
box-shadow: 0px 1px 3px #1F2D3D inset;
/*滚动条的背景区域的内阴影*/
border-radius: 10px;
/*滚动条的背景区域的圆角*/
background-color: #1F2D3D;
/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
// .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px #00a0e9 inset;
/*滚动条的内阴影*/
border-radius: 10px;
/*滚动条的圆角*/
background-color: #00a0e9;
/*滚动条的背景颜色*/
}