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(),第一个函数获取滚动条的位置,第二个函数获取当前屏幕可见的高度,第三个函数获取当前文档的总高度,

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

  • 相关阅读:
    POJ:1703-Find them, Catch them(并查集好题)(种类并查集)
    POJ:2236-Wireless Network
    POJ:2010-Moo University
    POJ :3614-Sunscreen
    POJ:2395-Out of Hay
    Aizu:2224-Save your cats
    POJ:2377-Bad Cowtractors
    CSS属性大全
    博客园背景设置CSS代码
    W3C标准以及规范
  • 原文地址:https://www.cnblogs.com/liubu/p/9012767.html
Copyright © 2011-2022 走看看