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>