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

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

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

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 到头部的距离 + 屏幕高度 = 可滚动的总高度
        // 当页面滑到了屏幕最底部要做的操作
      }
    },
posted @ 2020-01-03 18:30  逍-遥  阅读(535)  评论(0编辑  收藏  举报
民营企业网B2B