Question

我有多个数据，我想在滚动达到80％或接近时加载ajax无关紧要......我尝试使用jscroll但我无法实现想问我怎么能这样做？

＆＃13;

   $('.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.');
                    }
                }
            });

        })

＆＃13;

.lazy_content{
  border-bottom:3px solid #f0f0f0;
}

＆＃13;

<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>

＆＃13;

please click to see full page

Answer 1

您可以获取窗口顶部边框（$(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
   }
});

Answer 2

如何使用body.offsetTop使用身体总高度？

如何在滚动上加载数据？

2 个答案: