javascript - jQuery 中的延迟加载和不定式滚动问题以查找具有绝对位置的元素的新高度？

Question

我有一个具有绝对位置和溢出滚动的 div 元素，如下所示:

<style>
.sevencov {
    position: absolute;
    width: 61.333%;
    left: 16.667%;
    top: 46px;
    bottom: 0;
    right: 0;
    overflow: auto;
}
</style>

<div class="sevencov">
  <a id="load-more" class="load-more" title="Load More" onclick="myFunction()"></a>
</div>

我想在滚动时 div 的某个百分比处触发加载更多按钮，使用 jQuery 我尝试过:

$(function () {
    var prevHeight = $('.sevencov').height();
    $('.sevencov').scroll(function () {
            var curHeight = $(this).height();          
            if ($(this).scrollTop() > ($(document).height() - curHeight)*44) {
               $('#load-more').click();
            }            

    });
});

但问题是它会触发多次，因为我的 div sevencov 的高度始终相同，而且我无法找到解决方案，我做错了什么？

Answer 1

This is called as Lazy Loading

您可以使用 scrollTop、innerHeight 和 scrollHeight，如下所示。

文档

scrollTop - 获取元素滚动条的当前垂直位置

innerHeight - 获取元素当前计算的内部高度(包括填充但不包括边框)

scrollHeight - 元素内容的高度，包括由于溢出而在屏幕上不可见的内容

在下面的代码段中，您可以进行ajax调用。

此外，下面的snippet有window.loadProfile = loadProfile;以确保您的内联onclick与参数onClick配合使用="loadProfile(184, '', 'user69')"。如果可能，您可以将其替换为 jquery click 事件，例如 $('#load-more').on('click', function(){/* ajax call */} );

$(function () { 
  
    var testContent = 'The quick brown fox jumps over the lazy dog. ';
  var increment = 20;
  var contentLoading = false;
  var sevencovDiv = $('.sevencov');
  
  function loadProfile(id, text, user) {
    // You can do a ajax call here instead of a below code
    for(var i = 0; i < increment; i++) {
      sevencovDiv.html(sevencovDiv.html() + testContent);
    }
    
    contentLoading = false; // make this false once the content loaded from ajax call
  }
  
  loadProfile();
  
  window.loadProfile = loadProfile;

    $('.sevencov').scroll(function () {                  
      if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        if(!contentLoading) {
          //loadMore();
          contentLoading = true;
          $('#load-more').click();
        }
    }

    });
});

.sevencov {
    position: absolute;
    width: 61.333%;
    left: 16.667%;
    top: 46px;
    bottom: 0;
    right: 0;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sevencov">
  <a id="load-more" class="load-more" title="Load More" onClick="loadProfile(184, '', 'user69')"></a>
</div>