監聽滾動條距離瀏覽器底部的距離

問題描述：官網實現滾動滾動條，實現無限加載的功能

考慮的方法是： 滾動條距離瀏覽器底部多少時就加載下一頁數據。

計算距離瀏覽器底部的距離方法：

文檔本身的高度 - 瀏覽器的高度 - 滾動條距離頂部的距離 = 滾動條距離瀏覽器底部的距離 

 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)

    },