vue element-ui 滚动条的使用

START

• element-ui 官方文档并没有记录滚动条的用法，但是实际上，它是有的。
• 使用本文章的demo，默认认为你已经安装配置好了elemen-ui，没有配置请移步elemen-ui 安装配置
• 下列代码可直接cv，ღ( ´･ᴗ･` ）

代码

<template>
  <div>
    <h3 style="text-align: center">我是vue element-ui 滚动条的使用demo</h3>

    <div class="center">
      <el-scrollbar style="height: 100%">
        <!-- 用于展示下拉，填充的内容 -->
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
        lazy_tomato <br />
      </el-scrollbar>
    </div>
  </div>
</template>


<script>
export default {
  name: "demo",
};
</script>

<style>
/* scoped 需要去掉,不去掉,下面overflow-x: hidden;不会生效 */
.center {
  margin: 0 auto;
  width: 300px;
  height: 600px;
  background-color: #eee;
}

/* 需要在外层套一个div,切记命名特殊一点,防止因缺少scoped，对其他页面会有冲突 */
.center .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>

最终效果

vue element-ui 滚动条的使用.gif

END

• END ┓( ´∀` )┏