JS实现滚动条下拉翻页功能

Javascript piniu 1008浏览 0评论

JS 根据滚动条滚动事件,通过向下滚动滚动条完成翻页功能,代码如下:

//==========滚动条翻页加载数据=========================
 
    function getWindowHeight() {
        var windowHeight = 0;    if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        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;    return scrollHeight;
    }
 
    //文档高度
    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;    return scrollTop;
    }
 
    //监听滚动条事件
    var initPageNo = 1;
    var query = {};
    window.onscroll = function () {
 
        //监听事件内容
        if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
            initPageNo++;
            query['page'] = initPageNo;
            //如下的ajax_request(url, query) 函数是自己封装的ajax请求的函数。就是通ajax异步请求来完成分页操作
            ajax_request(url, query);
        }
    }

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • * 昵称:
  • * 邮箱: