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

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

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

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 到头部的距离 + 屏幕高度 = 可滚动的总高度
        // 当页面滑到了屏幕最底部要做的操作
      }
    },
你有什么心态,就有什么样的人生。管不好自己的心态,注定你就是个弱者。
原文地址:https://www.cnblogs.com/LQZ888/p/12146306.html