如何在滾動中加載數據？

我有一個以上的數據，我想加載ajax時滾動達到80％或接近無關緊要..我嘗試使用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

來源

2017-04-09 ani_css

你可以得到你的窗口的上邊框（$(window).scrollTop()）的位置，當前窗口的高度（$(window).height()）和文件（$(document).height()）的絕對高度。你的下邊框的位置是你的上邊框+窗口高度的位置，對吧？所以，當你的下邊框到達文件底部的時刻可以這樣計算：

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

，它可以調整（如你所說約80％）：

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

，並結合它以scroll處理程序：

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

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

來源

2017-04-09 11:54:41

我知道這種方式，但如果我達到了底部而不是內容再次出現，我得到了一些錯誤 –

有關使用body.offsetTop proprtional身體總高度是什麼？

來源

2017-04-09 11:57:40 BRad

如何在滾動中加載數據？

回答

相關問題