监听滚动条距离浏览器底部的距离

问题描述：官网实现滚动滚动条，实现无限加载的功能

考虑的方法是： 滚动条距离浏览器底部多少时就加载下一页数据。

计算距离浏览器底部的距离方法：

文档本身的高度 - 浏览器的高度 - 滚动条距离顶部的距离 = 滚动条距离浏览器底部的距离 

 document.body.scrollHeight - document.documentElement.clientHeight -  document.documentElement.scrollTop = 距离

代码实现：

onScroll() {
      this.docScrollTop = document.documentElement && document.documentElement.scrollTop
      // console.log(this.docScrollTop, '高度')    
          this.docClientHeight = document.body.clientHeight && document.documentElement.clientHeight
      // console.log(this.docClientHeight, '页面高度')
      this.docScrollHeight = document.body.scrollHeight
      // console.log(this.docScrollHeight, '文档实际高度')
      const aaa = this.docScrollHeight - this.docScrollTop - this.docClientHeight
      // console.log(aaa, '距离底部的高度')
      if (aaa > 20 && aaa < 50) {
        this.threadQuery.page++
        getChildClassify(this.threadQuery).then((res) => {
          const data = res.result
          this.threadList = this.threadList.concat(data.thread.list)
          if (this.threadList.length === this.count) {  
            window.removeEventListener('scroll', this.onScroll, false)
          }
        })
      }  

vue 中需要进行滚动条监听：

    mounted() {

        window.addEventListener('scroll', this.onScroll, false)

    },