Element Ui 滚动监听

需要对el-dialog弹窗进行滚动事件监听

添加监听事件

<el-button type="primary" @click="create">确认</el-button>
<el-dialog
      :title="ruleTitle"
      :visible.sync="showRule"
      width="70%"
      :append-to-body="true"
      :before-close="handleClose"
    >
    ...
    ...
    ...
</el-dialog>

//el-dialog出现之后进行监听
create(){
    this.showRule=true;
    this.$nextTick(() => {
        document.addEventListener('scroll', this.handleScroll, true);
    });
},
//监听滚动
handleScroll() {
  let sch = document.getElementsByClassName("el-dialog__body")[0].scrollHeight;//内容的高度
  let cih = document.getElementsByClassName("el-dialog__body")[0].clientHeight;//框的高度,固定的
  let sct = document.getElementsByClassName("el-dialog__body")[0].scrollTop;//滚动的高度
  // console.log(sch, cih, sct);
  if (sct >= sch - cih) {
    //滚动条拉到底部了，在这里做一些事情
    ...
  }
},

// 在el-dialog关闭之前删除监听
handleClose(done) {
  document.removeEventListener("scroll", this.handleScroll, true);
  done();
},

设置.el-dialog__body 滚动条

/deep/ {
  .el-dialog {
    margin: 60px auto !important;
    max-height: 550px;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      max-height: 400px;
      overflow: auto;
    }
  }
}