zoukankan      html  css  js  c++  java
  • 移动端页面滚动到底部自动加载数据

    $(window).bind("scroll", function () {
        if(getScrollHeight() == getDocumentTop() + getWindowHeight()){
            //当滚动条到底时,触发内容
            //ajax_function()            
            alert("滑动到的底部");
        }
    });
    
    //文档高度
    function getDocumentTop() {
        var scrollTop =  0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        console.log("文档高度scrollTop:"+scrollTop);
        return scrollTop;
    }
    
    //可视窗口高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        console.log("可视窗口windowHeight:"+windowHeight);
        return windowHeight;
    }
    
    //滚动条滚动高度
    function getScrollHeight() {
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        console.log("滚动高度scrollHeight:"+scrollHeight);
        return scrollHeight;
    }
  • 相关阅读:
    使用zinnia制作android手写输入功能(上)编译zinnia
    Raphael实例
    正则表达式 笔记
    已知弧长和弦长求半径
    Raphael参考 翻译完毕
    在chorme中查找多余的css规则
    CSS3中Transform
    手机移动端WEB资源整合
    JS判断移动设备最佳方法 并实现跳转至手机版网页
    让IE和Firefox兼容的CSS技巧集合css hack
  • 原文地址:https://www.cnblogs.com/wangyongx/p/9915641.html
Copyright © 2011-2022 走看看