Vue&Element隐藏组件el-scrollbar滚动条

今天有小伙伴问我怎么显示滚动条，看来还是得写详细点，所以我从新整理了一份并录了个GIF。
不显示滚动的原因：通常的滚动条横向纵向都开的属性是overflow: auto;（关闭是hidden），打开横向属性是overflow-y: auto;，打开纵向属性是overflow-x: auto;，当然并不是你在外层div添加了这些属性滚动条就会显示的，是需要div盒子里面的内容超出溢出才会显示滚动条的，饿了么的无疑就是封装了一个拥有overflow: auto;属性且设置了滚动条样式的组件而已。需要自定义滚动条样式可以看我的笔记13

<template>
  <div class="hello">
    <!-- 纵向滚动条 -->
    <div class="top">
      <el-scrollbar>
        <div class="mid-child">
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
        </div>
      </el-scrollbar>
    </div>
    <!-- 横向滚动条 -->
    <div class="mid">
      <el-scrollbar>
        <div class="mid-child">
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
        </div>
      </el-scrollbar>
    </div>
    <!-- 纵向横向滚动条 -->
    <div class="bottom">
      <el-scrollbar>
        <div class="bottom-child">
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
          <div>123</div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style scoped>
.hello {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}
.top .mid-child {
  height: 200px;
  background-color: rgb(214, 221, 185);
}
.top .mid-child div {
  width: 100px;
  height: 20px;
  background-color: rgb(185, 205, 221);
  border: 1px solid #000;
}
.mid {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}
.mid .mid-child {
  width: 200px;
  background-color: rgb(214, 221, 185);
}
.mid .mid-child div {
  width: 240px;
  height: 20px;
  background-color: rgb(185, 205, 221);
  border: 1px solid #000;
}
.bottom {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}
.bottom .bottom-child {
  width: 200px;
  height: 200px;
  background-color: rgb(214, 221, 185);
}
.bottom .bottom-child div {
  width: 240px;
  height: 20px;
  background-color: rgb(185, 205, 221);
  border: 1px solid #000;
}
</style>