element-ui的隐藏组件el-scrollbar的使用(解决原生滚动条没有隐藏的问题 高宽设置)

element-ui的官网页面使用的这个滚动条，但是在官网文档中没有介绍这个组件。

在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。

在项目中使用这个组件时由于各层的样式没有设置好，可能会显示出原生的滚动条，特此记录。

• 搭建脚手架项目，安装element-ui插件

• 按需引入需要的组件

  import Vue from 'vue'
  import {
    Scrollbar
  } from 'element-ui'
  
  Vue.use(Scrollbar)
  

• 使用

  <div class="main">
      <el-scrollbar>
        。。。要滚动的内容
      </el-scrollbar>
  </div>
  

  // less样式
  .main {
    width: 100%;
    height: 100%; // 建议设置父级元素的高度，这样div.el-scrollbar就可以通过%来设置高度
    padding: 0;
    overflow: hidden;
    .el-scrollbar {
      width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
      height: 100%; // 必须设置el-scrollbar的高度
      /deep/ .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的
        // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
        height: 100%;
        overflow: scroll;
        overflow-x:auto;
      }
    }
  }
  

• 渲染出来的dom结构

  <div class="main">
      <!-- el-scrollbar组件内部大致样子 -->
      <div class="el-scrollbar">
          <div class="el-scroll__wrap" style="margin-bottom: -17px; margin-right: -17px;">
          	。。。要滚动的内容
          </div>
          <div class="el-scrollbar__bar is-horizontal"></div> <!--水平滚动条 通过position定位-->
          <div class="el-scrollbar__bar is-vertical"></div> <!--垂直滚动条 通过position定位-->
      </div>
  </div>
  

• 渲染出来的dom结构的理解

  1. el-scrollbar组件的内部封装了这样一个div <div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
  2. div.el-scrollbar__wrap上添加一个margin-bottom和margin-right的样式，且值为负数(-17px)，
  3. 如果div.el-scrollbar__wrap没有设置宽度，那么设置margin-right为负值，会增加这个元素宽度（这里涉及到一个知识点:margin为负值时的作用），可以看到这个这个元素宽度变宽了，而div.el-scrollbar这个元素默认设置了overflow: hidden。所以会隐藏掉div.el-scrollbar__wrap的右边变宽的部分(也就是能隐藏掉原生的滚动条)
  4. 我们看到的漂亮的滚动条实际上是两个细长div，这两个div的位置是通过绝对定位来确定的。

• 注意：

  1. 为el-scrollbar的父级块div.main设置高度。
  2. 为el-scrollbar设置宽高，这样显示区域的大小就确定了。渲染出来的div.el-scrollbar默认会overflow:hidden属性，因此内部多余的部分会被隐藏掉(主要是用来隐藏div.el-scrollbar__wrap的原生滚动条的)。
  3. 在设置div.el-scrollbar__wrap的样式时前面必须加上/deep/。/deep/是>>>深度选择器的别名。之所以要用上/deep/才能覆盖UI组件内部样式，是因为vue中用了scoped属性，导致当前vue文件里的style仅仅作用于当前组件的元素，而对部分element UI的组件无效。
  4. 我们写在el-scrollbar中的内容实际上被渲染到div.el-scrollbar__wrap中，所以当我们给div.el-scrollbar__wrap设置了overflow属性为scroll时，el-srollbar身上会产生原生的滚动条。
     1. 原生竖直滚动条：由于div.el-scrollbar__wrap身上默认会添加margin-right:15px的属性，所以在div.el-scrollbar__wrap没有设置宽度的时候，它的宽度会向右增加15px，所以竖直方向的滚动条就被挤出去，隐藏掉了。
     2. 原生水平滚动条：原生水平的滚动条无法通过margin-bottom为负值来把它挤出可视区，因为无论div.el-scrollbar__wrap是否设置了高度，margin-bottom都不会影响自身的高度和定位。只有通过将div.el-scrollbar__wrap的高度设置来略大于div.el-scrollbar，才能隐藏掉水平滚动条。