jquery - 在滚动上加载下一篇文章 - 就像无限滚动

Question

我正在使用以下脚本通过单击按钮加载下一篇文章：

  jQuery('#showMore').click(function(event) {
       if (jQuery('#loader1').length) {
        jQuery('#loader1').hide();
       }
      jQuery('#showMore').text('Loading..');
      jQuery('#showMore').after('<img src="/wp-content/plugins/store/images/co/ajax-loader.gif" id="loader1">');
      if (jQuery('#no-more').length) {
       jQuery('#no-more').remove();
       }
         event.preventDefault();
         $number = jQuery('#product_grid li').length;

        jQuery.ajax({
           type: "POST",
           url: "/wp-content/plugins/store/ajax_more.php",
           data: "count=" + jQuery('#product_grid li').size(),
           success: function(results){
             jQuery('#product_grid').append(results);
             jQuery('#showMore').text('View More Products');
             jQuery('#loader1').hide();
           }
         });

  });

现在，我希望脚本在滚动时加载下一篇文章，而不是单击按钮。有没有办法做到这一点？

Answer 1

$(window).unbind(‘scroll’);  
if($(window).scrollTop() == $(document).height() - $(window).height()) {  
  //send request based on your cursor if more data available.  
}  

Answer 2

使用 jQuery(window).scroll 事件。

例子 ：

jQuery(window).scroll(function(){
   // existing stuff
});

您可以根据 scrollTop 属性控制加载数据回调。表示根据滚动量调用当前 $.ajax 请求的时间。