不借助 <el-scrollbar>
这种标签,实现滚动条的效果
一、使用 <div>
标签,设置 height:700px; overflow:auto
;
二、<el-main>
标签,设置:
.el-main{
height: 600px;
overflow-x: hidden;
overflow-y: scroll;
&::-webkit-scrollbar {
position: absolute;
width: 4px;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
-webkit-transition: opacity 120ms ease-out;
transition: opacity 120ms ease-out;
}
&::-webkit-scrollbar-thumb {
position: relative;
display: block;
cursor: pointer;
border-radius: 4px;
background-color: rgba(144, 147, 153, 0.3);
transition: 0.3s background-color;
&:hover{
background-color: rgba(144, 147, 153, 0.5);
}
}
}
隐藏掉 水平滚动条 :wrap-style="overflow-x: hidden;"