0

当用户滚动到底部时,我正在尝试使用以下函数加载 ajax 调用。但是,由于某种原因,该函数仅在用户向下滚动然后返回顶部时触发 ajax 调用。这是我的代码:

$(window).scroll(function()
{   
if($(window).scrollTop() == $(document).height() - $(window).height())
{
    $('div#loadmoreajaxloader').show();
    $.ajax({
    url: "loadmore.php",
    success: function(html)
    {
        if(html)
        {
            var el = jQuery(html);
            jQuery(".content").append(el).masonry( 'appended', el, true );
            $('div#loadmoreajaxloader').hide();
        }else
        {
            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
        }
    }
    });
}
});
4

2 回答 2

0
  $(window).scroll(function()
    {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)  {
           //do your stuff here

        }


    });
于 2012-12-13T11:39:27.737 回答
0

像这样检查它:

  fetchContent = function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        console.log('At bottom!!');

        // Remove the handler temporarily, so no more scroll events will fire.
        $(window).off('scroll', fetchContent);

        // Make the AJAX call.
        $('div#loadmoreajaxloader').show();
        $.ajax({
              url: "loadmore.php",
              success: function(html)
              {
                 if(html)
                 {
                     var el = jQuery(html);
                     jQuery(".content").append(el).masonry( 'appended', el, true );
                     $('div#loadmoreajaxloader').hide();
                 }else
                 {
                     $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                 }
                 // Re-attach the handler, so scroll events will fire again
                 $(window).on('scroll', fetchContent);
              }
             });
     }
  };

  $(function() {
      $(window).on('scroll', fetchContent);
  });

编辑:

我已经完成了一个 JSBin,当用户滚动到底部时它会显示一个 div。你可以在这里看到它:http: //jsbin.com/axobow/2

我知道这不完全是你需要的,但它应该给你一个想法。Iv'e 还稍微更新了代码,以符合您作为最终产品应该拥有的内容。

请检查。

于 2012-12-13T12:09:52.257 回答