如何判断页面滑到了屏幕最底部

Posted 2020-11-24 lqz888

如何判断页面滑到了屏幕最底部

项目中经常会遇到列表页，为了保证用户体验，我们都会用到上拉加载的技术，保持用户体验，如何判断页面滑到了屏幕最底部是较为关键的一步：具体实现：

mounted 中监听：

 

mounted () {
    window.addEventListener(‘scroll‘, this.scroll, false) // 监听（绑定）滚轮滚动事件
  },

methods中声明方法：

 

scroll () {
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 设备/屏幕高度
      let scrollObj = document.querySelector(‘#surface‘) // 滚动区域
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let scrollheight = scrollObj.scrollHeight // 滚动条的总高度
      if (scrollTop + clientHeight == scrollheight) {  // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
        // 当页面滑到了屏幕最底部要做的操作
      }
    },