Lazy Load und Infinitiv Scroll-Problem in jQuery, um neue Höhe eines Elements mit absoluter Position zu finden?

Question

Ich habe ein div-Element mit Position absolut und Überlauf blättern wie folgt aus:

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

ich die Last mehr Taste zu einem bestimmten% des div auf Blättern feuern wollen, versucht, mit jQuery ich diesen:

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

    }); 
}); 

Aber das Problem ist, dass es mehrere Male ausgelöst wird, weil die Höhe meiner div sevencov immer gleich ist und ich bin nicht in der Lage, eine Lösung zu finden, was mache ich falsch?

Answer 1

als Lazy Loading

genannt Dies verwenden Sie mit spielen können scrollTop, innerHeight und scrollHeight wie unten.

Dokumentation

scrollTop - Ermittelt die aktuelle berechnete Innenhöhe (einschließlich padding aber Grenze nicht) für das Element

- für das Element

innerHeight die aktuelle vertikale Position der Bildlaufleiste Holen

scrollHeight - Die Höhe des Inhalts eines Elements, einschließlich des Inhalts, der aufgrund von Überlauf nicht auf dem Bildschirm sichtbar ist

In der folgenden snippet können Sie Ihren ajax Anruf platzieren.

Auch die folgenden snippet hatten window.loadProfile = loadProfile;, um sicherzustellen, dass Ihre Inline onclick mit den Parametern onClick="loadProfile(184, '', 'user69')" arbeitet. Wenn möglich, können Sie diese ersetzen mit jquery click event wie $('#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>

Answer 2

Wie in einer anderen Frage erwähnt (here), die Höhe eines Überströmelement zu erhalten, sollten Sie $('.sevencov')[0].scrollHeight statt .height()