【问题标题】:jQuery Infinite scroll pagination function after 80% Screen height?80%屏幕高度后的jQuery无限滚动分页功能?
【发布时间】:2014-10-07 13:42:59
【问题描述】:

我有一个 jQuery 无限滚动分页。它在 100% 屏幕高度(底部)加载添加页面后滚动。 现在我想从 100% 屏幕高度更改为 80% 屏幕高度。那我该怎么办?

这是我的网站:http://gaixinh.cto.vn/

<!-- start infinite scroll function  -->

<script type="text/javascript">
    jQuery(document).ready(function($) {

        var count = 2;
        var total = <?php echo $wp_query->max_num_pages; ?>;
        $(window).scroll(function(){
                if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                   if (count > total){
                        return false;
                   }else{
                        loadArticle(count);
                   }
                   count++;
                }
        }); 

        function loadArticle(pageNumber){ 

                $('a#inifiniteLoader').show('fast');

                $.ajax({
                    url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                    type:'POST',
                    data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop', 
                    success: function(html){
                        $('a#inifiniteLoader').hide('1000');

                        $("#tiles").append(html);    // This will be the div where our content will be loaded
                        $("a[rel='colorbox']").colorbox({
                                transition:'elastic', 
                                opacity:'0.7', 
                                maxHeight:'90%'
                        });
                    }
                });
            return false;
        }

    });


</script>

<!-- end infinite scroll pagination -->

【问题讨论】:

  • if ($(window).scrollTop() == $(document).height() - $(window).height()) 改为if ($(window).scrollTop() == ($(document).height()*0.8) - $(window).height())
  • 谢谢@haxxxton!我已经改变了,但它不起作用。
  • @haxxxton !当我从if ($(window).scrollTop() == $(document).height() - $(window).height()) 更改为if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height())*0.8) 时,它起作用了。但是一次加载所有页面

标签: jquery scroll pagination infinite


【解决方案1】:

我认为无限滚动分页必须在文档高度的 80% 之后运行(不是您的平均屏幕高度)。

先设置一个标志,防止函数在滚动时循环

var flag = false;
$(window).scroll(function(){
    if(flag)
        return; //return if the infinite pagination is calling
    if  ($(window).scrollTop() > ($(document).height() - $(window).height())*80/10){
        flag = true;  //set flag
        infiniteLoad();
    }
}); 
function infiniteLoad(){
    //do something
    flag = false; //un set flag
}

【讨论】:

  • 谢谢@HDT .. /我已经设置了,但它还是旧的.. 无法更改。
  • !当我将旧 jQuery 从 if ($(window).scrollTop() == $(document).height() - $(window).height()) 更改为 if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height())*0.8) 时,它可以工作。但是一次加载所有页面
猜你喜欢
  • 2012-06-30
  • 1970-01-01
  • 2016-01-18
  • 2015-12-07
  • 1970-01-01
  • 2019-10-05
  • 2014-05-15
  • 2013-05-07
  • 2016-01-18
相关资源
最近更新 更多