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，才能隐藏掉水平滚动条。