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);
  });

編集：

ユーザーが一番下までスクロールするとdivを表示するJSBinを実行しました。あなたはここでそれを見ることができます：http：//jsbin.com/axobow/2

私はそれがあなたが必要としているものではないことを知っていますが、それはあなたにアイデアを与えるはずです。Iv'eはまた、コードを少し更新して、最終製品として必要なものと一致するようにしました。

チェックしてください。

于 2012-12-13T12:09:52.257 に答える