zoukankan      html  css  js  c++  java
  • js 移动端上拉加载下一页通用方案

    取页面三种高度

    //取进度条到底部距离
    var getScrollTop = function () {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    };
    //取页面可视区域高度
    var getClientHeight = function () {
        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;
    };
    //取文档整体高度
    var getScrollHeight = function () {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    };

    当页面滚动到最底部时,才执行加载下一页的处理方法

    //页面滚动事件
    window.onscroll = function () {
        if (getScrollTop() + getClientHeight() == getScrollHeight()) {
            //页面已滚动到最底部
            fun();//页面已滚动到最底部处理
        }
    };

    一个DEMO:http://211.140.7.173:8081/t/wuhairui/t/upLoad.html

  • 相关阅读:
    简单理解Socket
    进程间8种通信方式详解
    底部漂浮DIV
    Table样式
    QQ授权登录
    C#_批量插入数据到Sqlserver中的四种方式
    Asp.Net_单点登录
    html之meta详解
    程序员常用工具
    工厂模式理解
  • 原文地址:https://www.cnblogs.com/wuhairui/p/7506110.html
Copyright © 2011-2022 走看看