2017-04-09 11 views
0

私は複数のデータを持っており、スクロールが80%に近づいたり、近くになってもAJAXをロードしたいのですが、jscrollを使用しようとしましたが、どうすればいいのですか?スクロールにデータをロードする方法は?

$('.lazy_content').each(function() { 
 
      var data_url = $(this).data("url"); 
 
      var data_id = $(this).data("target-id"); 
 
      var target = $("#" + data_id); 
 

 
      $.ajax({ 
 
       url: data_url, 
 
       type: "POST", 
 
       beforeSend: function() { 
 
        target.html(""); 
 
       }, 
 
       success: function(data) { 
 
        $(data).each(function(index, el) { 
 
         target.append(el); 
 
        }); 
 
       }, 
 
       complete: function() { 
 
        $("#loading").hide(); 
 
       }, 
 
       error: function(jqXHR, textStatus, errorThrown) { 
 
        if (jqXHR.status == 500) { 
 
         target.html('Internal error: ' + jqXHR.responseText); 
 
        } else { 
 
         target.html('Unexpected error.'); 
 
        } 
 
       } 
 
      }); 
 

 
     })
.lazy_content{ 
 
    border-bottom:3px solid #f0f0f0; 
 
}
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea"> 
 
    <h4>COMMENTS</h4> 
 
    <div id="PostsArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea"> 
 
    <h4>POSTS</h4> 
 
    <div id="CommentsArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-3-users" data-target-id="UsersArea"> 
 
    <h4>USERS</h4> 
 
    <div id="UsersArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-4-forums" data-target-id="ForumsArea"> 
 
    <h4>FORUMS</h4> 
 
    <div id="ForumsArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-5-us" data-target-id="UsArea"> 
 
    <h4>FORUMS</h4> 
 
    <div id="UsArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-6-text" data-target-id="textArea"> 
 
    <h4>TEXT</h4> 
 
    <div id="textArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-8-content" data-target-id="contentArea"> 
 
    <h4>CONTENT</h4> 
 
    <div id="contentArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 

 
<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-7-last" data-target-id="lastArea"> 
 
    <h4>TEXT</h4> 
 
    <div id="lastArea"> 
 
    <div id="loading"><img src="http://betacontent.anitur.com.tr/web/assets/img/loading.gif"></div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

please click to see full page

答えて

2

あなたは、ウィンドウの上の境界($(window).scrollTop())の位置を、現在のウィンドウの高さ($(window).height())および文書($(document).height())の絶対的な高さを得ることができます。下枠の位置は上枠の位置+窓の高さですか?だから、あなたの下の境界線は、文書の下部に到達した瞬間は、このように計算することができます

$(window).scrollTop() + $(window).height() == $(document).height() 

をし、それを調整することができます(あなたが言ったように約80%):

$(window).scrollTop() + $(window).height() > $(document).height() * 0.8 

と組み合わせますそれscrollハンドラを持つ:身体全体の高さにbody.offsetTop proprtionalの使用に関する

$(window).on('scroll', function() { 
    var reachedBottom = $(window).scrollTop() + $(window).height() > $(document).height() * 0.8; 

    if (reachedBottom) { 
     # whatever you want to do 
    } 
}); 
+0

私はこのように知っていましたが、コンテンツが再開するよりも底に達した場合にはバグがありました –

関連する問題