el-scrollbar组件的使用
<article>
<!-- 左侧区域-->
<el-scrollbar class="left-aside">
<!-- 780px -->
<div class="left-content"></div>
</el-scrollbar>
<!-- 右侧区域 -->
<el-scrollbar class="right-aside">
<!-- 1800px -->
<div class="right-content"></div>
</el-scrollbar>
</article>
article {
display: flex;
justify-content: space-between;
.el-scrollbar {
height: 680px; // 两区域展示的高度均为680px
border-radius: 10px;
background-color: #fff;
&.left-aside {
width: 490px;
}
&.right-aside {
width: 1060px;
}
.el-scrollbar__wrap {
margin: 0 !important;
// 隐藏浏览器原生滚动条
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
.left-content {
height: 780px; // 左侧实际内容高度
}
.right-content {
height: 1800px; // 右侧实际内容高度
}
}
}
}
本例中的样式没有使用scoped,因此可以直接更改Element的内部样式.如果你使用了scoped,请使用样式穿透/deep/ 选择器{}
.vue3则是:deep(选择器){}
两侧区域的高度均为680px,但两者的内容高度均不一致,最终呈现效果如下
elementPlus已有文档 https://element-plus.org/zh-CN/component/scrollbar.html