el-scrollbar下拉触发事件

由于element-ui官网的文档，没有el-scrollbar的文档描述，在公司接手项目看到之前的同事用了这个就学习了一下。 通过百度试用了几种方法最后就只有一种是有用的，也是最最简单的。

  <el-scrollbar class="scroll-wrap" ref="celia" id="resultScroll">
          <div  v-for="(item,index) in finalTable" :key="item.fdictionary">
            <!-- 数据渲染，不重要 -->
            <div>{{ item.testName}}</div>
            <div>{{ item.remark}}</div>
            <div>{{ item.samplingTime}}</div>
              <!-- 数据渲染，不重要 -->
          </div>
        </el-scrollbar>

第二

  mounted() {
   let that = this;
   document
     .getElementById("resultScroll")
     .addEventListener("scroll", that.handleScroll, true);
 }

第三

methods:{

  handleScroll() {
     let high = this.$refs.celia.$refs.wrap.scrollTop;//距离顶部的距离
                                           //.clientHeight - 滚动条外容器的高度
                                           //.scrollHeight - 滚动条高度
     if (high > 270) {
       //自行定义
     }
}

关于样式设计

.scroll-wrap{
     // height: 100%;
     // 在父元素.wrap  使用flex:1而不是直接指定高宽的时候，此时滚动条组件想要铺满父元素剩余空间将高度设置百分比为100%会导致滚动条组件无效
     // 此时可以先将height指定为小于父元素剩余空间的px值，然后设置flex:1则可以完美解决铺满父元素的同时滚动条生效
    // 而且注意要在全局样式中修改滚动条横向滚动隐藏的样式：overflow-x: auto;
        height: 6.25rem;
     // 必须设置高度，否则滚动条组件无法生效}