1、针对el-scrollbar的隐藏
.el-scrollbar{
.el-scrollbar__bar.is-vertical {
opacity: 1;
width:5;
}
}
点击查看原链接—↑
点击查看原链接—↓
2、计算滚动条宽度并隐藏
.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
3、不用计算滚动条宽度,但需要三个容器包起来
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
4、CSS隐藏滚动条
# chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
# IE 10+
.element { -ms-overflow-style: none; }
#Firefox
.element { overflow: -moz-scrollbars-none; }
5、容器高度不确定的容器的滚动条隐藏方法
.export4Box>>>.dialogContant-outer{
overflow: hidden;
}
.export4Box>>>.dialogContant-inner{
max-height: 510px;
overflow-x: hidden;
overflow-y: scroll;
}
.export4Box>>>.dialogContant-inner::-webkit-scrollbar {
display: none;
}