Jquery scroll infinito - con div not scrollbar del corpo

Supponiamo di avere div e voglio recuperare i dati e spingere i dati in quel div. Quando l'utente scorre all'interno del div, il prossimo set di dati verrà recuperato e inserito nel div. Come posso rilevare la posizione della barra di scorrimento con jQuery? Non voglio usare nessun plugin. Ho bisogno del codice jQuery. Ecco il link di esempio come ahttp: //www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html ma ha usato un plugin.Jquery scroll infinito - con div not scrollbar del corpo

fonte

2012-04-09 Thomas

ne dite qualcosa sulla falsariga di:

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     var new_div = '<div class="new_block"></div>'; 
     $('.main_content').append(new_div.load('/path/to/script.php')); 
    } 
});

Questo aggiungerà un nuovo elemento al contenitore pagina principale quando la barra di scorrimento raggiunge il fondo della pagina. Riempie anche questo nuovo elemento con contenuti caricati da uno script esterno.

Se si vuole rilevare se un utente ha fatto scorrere verso il basso un div specifica:

$('.some_element').bind('scroll', function(){ 
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){ 
     var new_div = '<div class="new_block"></div>'; 
     $('.main_content').append(new_div.load('/path/to/script.php')); 
    } 
});

fonte

2012-04-09 11:03:47 hohner

perché si scrive questa riga come $ (this) [0] .scrollHeight perché non $ (this) .scrollHeight. perché scrivi qui come array. menzione di plzz. grazie – Thomas

@Thomas, questa è la notazione delle parentesi, usata qui per accedere alla proprietà zeroth dell'oggetto jQuery $ (this). Gli oggetti jQuery sono in forma di array, quindi è possibile che la prima proprietà sia coerente. In questo caso, si tratta di un riferimento al nodo DOM avvolto dall'oggetto jQuery. È una stenografia veloce. – Bungle

@hohner - Quasi perfetto!;) Ho una piccola modifica per quel secondo blocco. Per un div con 'overflow-y: auto', la logica seguente ha funzionato per me:' $ (this) .scrollTop() === ($ (this) [0] .scrollHeight - $ (this) .innerHeight()) '. –

penso .scrollTop() è la vostra arma di scelta. jQuery API

ottenere la posizione verticale corrente della barra di scorrimento del primo elemento nella serie di elementi accoppiati.

Quindi assicuratevi di associarlo all'elemento giusto. Direttamente sul div dovrei lavorare credo.

La posizione di scorrimento verticale è uguale al numero di pixel che sono nascosti alla vista sopra l'area scorrevole. Se la barra di scorrimento è in cima, o se l'elemento non è scorrevole, questo numero sarà essere 0.

Quindi, probabilmente hai di trovare un modo per calcolare l'altezza del div come se sarebbe allungato senza barra di scorrimento per metterli in numeri in una relazione significativa per sparare all'evento di caricamento.

fonte

2012-04-09 11:11:37 yoshi

Questo codice è stato testato e verificato come funzionante. Quando si scorre il div, il codice controlla se lo scroller ha raggiunto il fondo confrontando l'altezza dello scroller con la posizione dello scroller. In tal caso, chiama a un metodo che ottiene più contenuto e lo aggiunge al div.

Divertiti!

Koby

$(document).ready(function() { 
     $("div").scroll(function() { 
      var $this = $(this); 
      var height = this.scrollHeight - $this.height(); // Get the height of the div 
      var scroll = $this.scrollTop(); // Get the vertical scroll position 

      var isScrolledToEnd = (scroll >= height); 

      $(".scroll-pos").text(scroll); 
      $(".scroll-height").text(height); 

      if (isScrolledToEnd) { 
       var additionalContent = GetMoreContent(); // Get the additional content 

       $this.append(additionalContent); // Append the additional content 

      } 
     }); 
    });

Per il tuo commento, qui è l'intero codice sorgente di pagina HTML che sta lavorando (testato in IE 9):

** Si prega di assicurarsi che si fa riferimento libreria jQuery **

 <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Image</title> 
     <script src="assets/js/jquery.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("div").scroll(function() { 
        var $this = $(this); 
        var height = this.scrollHeight - $this.height(); // Get the height of the div 
        var scroll = $this.scrollTop(); // Get the vertical scroll position 

        var isScrolledToEnd = (scroll >= height); 

        $(".scroll-pos").text(scroll); 
        $(".scroll-height").text(height); 

        if (isScrolledToEnd) { 
         var additionalContent = GetMoreContent(); // Get the additional content 

         $this.append(additionalContent); // Append the additional content 

        } 
       }); 
      }); 

      function GetMoreContent() { 
       return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>"; 
      } 
     </script> 
    </head> 
     <body> 
      <div style="overflow: scroll;height: 150px; border: 1px solid red;"> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
       <p>This is the div content</p> 
      </div> 

      Scroll Height: <span class="scroll-height"></span> <br/> 
      Scroll position: <span class="scroll-pos"></span> 
     </body> 
    </html>

fonte

2012-04-09 11:25:06

Jquery scroll infinito - con div not scrollbar del corpo

risposta

Problemi correlati