首页 > 其他 > 详细

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

时间:2020-01-03 19:54:04      阅读:110      评论:0      收藏:0      [点我收藏+]

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!