el-scrollbar组件的使用
发布时间：2024-08-21 00:49 浏览量：4
article {display: flex;justify-content: space-between;.el-scrollbar {height: 680px; // 两区域展示的高度均为680pxborder-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,但两者的内容高度均不一致,最终呈现效果如下