如何在滚动中加载数据？

我有一个以上的数据，我想加载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

如何在滚动中加载数据？

回答

相关问题