zoukankan      html  css  js  c++  java
  • 如何判断页面滑到了屏幕最底部

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

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

    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 到头部的距离 + 屏幕高度 = 可滚动的总高度
            // 当页面滑到了屏幕最底部要做的操作
          }
        },
    你有什么心态,就有什么样的人生。管不好自己的心态,注定你就是个弱者。
  • 相关阅读:
    mybatis 缓存
    mybatis 级联
    mybatis 传递多个参数
    mybatis 枚举typeHandler
    mybatis 自定义typeHandler
    mybatis typeHandler类型转换器
    Fastjson 序列化与反序列化
    单独使用MyBatis的简单示例
    dubbo+zookeeper+springboot简单示例
    intellij 插件的使用
  • 原文地址:https://www.cnblogs.com/LQZ888/p/12146306.html
Copyright © 2011-2022 走看看