element-ui的滚动条el-scrollbar及其嵌套问题，实现表头定位，内容滚动

前言

在用card的作为表单填写的时候，由于表单过长，填写完后需要重新返回到最上面提交表单。在查询backtop组件使用失败后，决定采用滚动条嵌套的方式实现下图所示功能。

正文

全局引入什么的就不介绍了，主要讲使用。

1.理论

1.在html中创建中，先用div包裹，在用el-scrollbar装需要滚动的内容。(内层的el-scrollbar外也需要有一层div包裹. 2.css
（1）外层div需要设置宽高，即el-scrollar的高度
（2）重要设置el-scrollbar和el-scrollbar__wrap的样式（每一层的scrollbar都要设置）

.el-scrollbar {
      width: 100%;
      height: 100%;
      /deep/ .el-scrollbar__wrap {
        height: 100%;
        overflow: scroll;
        overflow-x: auto;
      }
    }

2.代码

1.html部分

<div class="show-area">
  <!-- 第一层scrollbar -->
   <el-scrollbar>
       <el-card>       
           <div class="formArea">
           <!-- 第二层scrollbar -->
               <el-scrollbar>
                   ...
               </el-scrollbar>
           </div>
       </el-card>
   </el-scrollbar>
</div>

2.css部分

// 第一层的设置
.show-area {
    width: 100%;
    height: 100%;
    .el-scrollbar {
      width: 100%;
      height: 100%;
      /deep/ .el-scrollbar__wrap {
        height: 100%;
        overflow: scroll;
        overflow-x: auto;
      }
    }
  }

// 第二层的设置
.show-area .el-card {
    width: 700px;
    margin: 0 auto;
      height: 510px;
      overflow: hidden;
      .el-scrollbar {
        height: 100%;
      }
      .el-scrollbar__wrap{
        overflow: scroll;
        overflow-x: auto;
      }
    }
  }

3.源码

scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {
    native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {},  // 包裹层自定义样式
    wrapClass: {},  // 包裹层自定义样式类
    viewClass: {},  // 可滚动部分自定义样式类
    viewStyle: {},  // 可滚动部分自定义样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {  // 生成的标签类型，默认使用 `div`标签包裹
      type: String,
      default: 'div'
    }
}