码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-01-03 19:15:33      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:bsp   off   win   The   list   set   lis   用户   nbsp   

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

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

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 到头部的距离 + 屏幕高度 = 可滚动的总高度
        // 当页面滑到了屏幕最底部要做的操作
      }
    },

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

标签:bsp   off   win   The   list   set   lis   用户   nbsp   

原文地址:https://www.cnblogs.com/LQZ888/p/12146306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!