iso下拉加载会重复加载内容(苹果系统自带橡皮筋滚动影响)

刚开始写的时候没有注意到这个iso系统的问题,直接就是获取滚动距离来判断下拉加载,结果因为iso浏览器自带的橡皮筋功能,造成页面重复加载的!
这是原来的

//加载更多
                //自动加载
                $(window).scroll(function() {
                    if ($(document).height() - $(this).scrollTop() - $(this).height() < 1 && $('#btnLoadMore').css('display') != 'none') {
                        var url = $("#urladdress").val(),
                            page = $("#pagenum").val();
                        init_json(url + '/' + page);
                    }
                });

现在改一下加载触发的方式:

//下拉加载数据
    $(window).bind("scroll", function () {
        if(getScrollHeight() == getDocumentTop() + getWindowHeight() && $('#btnLoadMore').css('display') != 'none'){
            // alert("滑到底部");
            var url = $("#urladdress").val(),
                            page = $("#pagenum").val();
                        init_json(url + '/' + page);
        }
    });
 
 
 
    //文档高度
    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;
    }

因为禁用屏幕滚动是对体验有影响,只能这么操作了

标签: 无

发表评论:

whatsapp营销