页面|特定区域内，触底分页加载

页面：

<template>
  <div class="mainPage">
    <div
      class="askDetailPage"
    >
      <div class="askDetail">
        <span class="title">
          {{ detail.name }}
        </span>
        <div class="answer" v-html="readData"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'askDetail',
  data () {
    return {
      id: '',
      readData: '',
      detail: {},
      pg: 1,
      isDetailOver: false
    }
  },
  created () {
    this.id = this.$route.params.id
    this.readTXTDetail()
  },

  beforeRouteUpdate (to, from, next) {
    this.id = to.params.id
    this.readTXTDetail()
    next()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll () {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop // 变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight // 变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight
      if (scrollTop + windowHeight === scrollHeight & this.isDetailOver === false) {
        // 请求数据接口
        this.pg = this.pg + 1
        this.readTXTDetail()
        return false
      }
    },
    // 私有云云阅读
    readTXTDetail () {
      this.$api.post(
        '/index/read',
        {
          fid: this.id,
          page: this.pg,
          size: 5000
        },
        (res) => {
          if (res.code === 200) {
            this.detail = res.data
            this.readData =
              this.pg === 1
                ? res.data.info
                : this.readData.concat(res.data.info)
            if (res.data.info === '') {
              this.isDetailOver = true
            }
          } else {
            this.isDetailOver = true
            this.$notify.warning({
              title: '提示',
              message: res.msg
            })
          }
        },
        2
      )
    }
  }
}
</script>

弹窗类：
在需要滚动的地方添加ref或者id

  <div
            class="readDetailBox"
            ref="readDetailBox"
            @scroll="onDeatilScroll($event)"
          >
            <div class="readContent" v-html="readData"></div>
          </div>

请求分页处理

   // 底部请求分页  
    onDeatilScroll (e) {
      var scrollTop = this.$refs.readDetailBox.scrollTop
      var windowHeitht = this.$refs.readDetailBox.clientHeight
      var scrollHeight = this.$refs.readDetailBox.scrollHeight
      let total = scrollTop + windowHeitht

      if ((total === scrollHeight ) & (this.isDetailOver === false)) {
        this.readDeatilPg = this.readDeatilPg + 1
        this.readTXTDetail()
      }
    },

接口处理

    readTXTDetail () {
      this.$api.post(
        '/read',
        {
          fid: this.curItem.id,
          page: this.readDeatilPg,
          size: 5000
        },
        (res) => {
          this.readData =
            this.readDeatilPg === 1
              ? res.data.info
              : this.readData.concat(res.data.info)
          if (res.data.info === '') {
            this.isDetailOver = true
          }
        },
        2
      )
    },