zoukankan      html  css  js  c++  java
  • 手机端下拉刷新

    //获取滚动条位置

    function getScrollTop() {
    var scrollTop = 0;
    if(document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
    } else if(document.body) {
    scrollTop = document.body.scrollTop;
    }

    //获取当前可视范围的高度

    function getClientHeight() {
    var clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight) {
    clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
    clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
    }

    //获取文档完整的高度 

    function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    //滚动事件触发

    window.onscroll = function() {
      if(getScrollTop() + getClientHeight() == getScrollHeight()) {
      //执行事件
      }
    }

    原理:

    代码做了一个判断getScrollTop() + getClientHeight() == getScrollHeight(),第一个函数获取滚动条的位置,第二个函数获取当前屏幕可见的高度,第三个函数获取当前文档的总高度,

    当前两个参数等等第三个参数的时候,就表示文档已经拉到底部了,触发事件向后台请求数据。这样一个分页功能就写出来了

  • 相关阅读:
    第三章预习
    预习非数值数据的编码方式
    预习原码补码
    第三章——运算方法和运算部件预习
    预习非数值数据的编码方式
    预习原码补码(习题+预习)
    预习非数值数据的编码方式
    预习原码补码
    10.21
    10.7作业
  • 原文地址:https://www.cnblogs.com/liubu/p/9012767.html
Copyright © 2011-2022 走看看