element滚动条组件el-scrollbar

时间:2022-06-03 风如也人气:0

element官网文章中没有介绍滚动条的使用方式，但是官方滚动条源码中有滚动条的样式代码

样式效果

在这里插入图片描述

使用方法

页面中引入 el-scrollbar 组件

<el-scrollbar style="height: 100%">
      <!-- 滚动条要包裹的内容 --> 
      <div class="container"> 占位</div>
</el-scrollbar>

在这里插入图片描述

el-scrollbar 组件有以下几个模块的内容：

el-scrollbar ：需要指定高度
el-scrollbar__wrap：包裹滚动区域
el-scrollbar__bar is-horizontal：横向滚动条
el-scrollbar__bar is-vertical：纵向滚动条

如果不需要横向滚动条（不加scoped）

<style lang="scss">
/* element滚动条组件 隐藏水平滚动条 */
.sidebar-wrapper .el-scrollbar__wrap {
  overflow-x: hidden;
}
.is-horizontal {
  display: none;
}
</style>

方式二：如果滚动条组件用在 Layout.vue 组件中，请不要在 Layout.vue 中引入隐藏横向滚动条的 css 样式，这会影响后续如下拉选择框的滚动条样式
解决方法：创建一个 css 文件，在 Layout.vue 中单独引入css 文件，记得加上 Layout.vue 中滚动条组件的父级 class 类，避免影响后面的样式

// common.css
/* element滚动条组件 隐藏水平滚动条 */
.sidebar-wrapper .el-scrollbar__wrap {
    overflow-x: hidden;
  }

Layout.vue

<style lang="scss" scoped>
@import "../assets/css/common.css";
...
</style>

加载全部内容