計算無限滾動上的滾動頂部

Question

我有一個ajax函數，可以獲取更多帖子。

但我想自動觸發它。

我的html結構看起來像這樣

<div class="header">
    ....
</div>
<ul id="grid">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <!-- load more content -->
</ul>
<div>
    ....
</div>
<div>
    ....
</div>
<div>
    ....
</div>
<div>
    ....
</div>
<div class="footer">
    ....
</div>

我現在正在使用此代碼。

var count = 2;
    $(window).scroll(function(){
            if  ($(window).scrollTop() == $(document).height() - $(window).height()){
               loadArticle(count);
               count++;
            }
    }); 

該代碼僅在用戶到達頁面底部時才觸發ajax功能。

誰能告訴我計算scrolltop的正確方法？

Answer 1

使用以下代碼

function bindScroll(){

  if ($(window).scrollTop() >= $("#grid").height() - $(window).height() - 10) {

    // unbind scroll
    $(window).unbind('scroll');

    //call ajax function 
    loadArticle(count);

  }
}

function loadArticle(count){
   ....
   ..Ajax Call ..
   ....
   //bind sroll again
   bindScroll();
}

並在$（document）.ready部分中調用bindScroll（）函數來綁定滾動事件

Answer 2

好的，我使用了一些替代解決方案。

希望對其他人有用。

<script type="text/javascript">
jQuery(document).ready(function($) {  
var count = 2;
$.log(count);
var total = <?php echo $wp_query->max_num_pages; ?>;
            $(window).scroll(function(){
                    if (element_in_scroll("#inifiniteLoader")) {
                       if (count > total){
                            $("#inifiniteLoader").css('display','none');  
                            return false;  
                        }else{
                            $("#inifiniteLoader").css('display','block');  
                            loadArticle(count);  
                        }  
                       count++;
                    }
            }); 
function loadArticle(pageNumber) {
    $.ajax({
        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
        type:'POST',
        data: "action=infinite_scroll&page_no="+ pageNumber, 
        success: function(html){
            $("#og-grid").append(html);    // This will be the div where our content will be loaded
        }
    });
    return false;
}
function element_in_scroll(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
});
</script>


#inifiniteLoader {
    margin: 20px 0;
    display:none;
}

將此代碼放在要加載圖像的位置。

<div style="text-align:center;" class="clear" id="inifiniteLoader">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/loading.gif">
</div>

要加載圖像， 請在此處檢查