carico e rimuovere le pagine di contenuto basato su direzione di scorrimento e l'altezza

Question

ho semplice griglia dati in questo modo:

<div class="uiGridContent"> 
    <table> 
     <tbody id="page-1"> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

* Si noti che ho un'intestazione e piè in tabelle separate in div sopra e sotto l'uiGridContent div. Questo non è richiesto per questo esempio.

var nextPage = 1, lastScrollTop = 0, st; 

$('.uiGridContent').scroll(function(){ 

    var st = $(this).scrollTop(); 

    // We're scrolling down 
    if (st > lastScrollTop){ 

     if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent')[0].scrollHeight && nextPage < 10) { 

      $.ajax({ 
       url: '<?php echo $appurl; ?>?page=' + nextPage, 
       success: function(data) { 
        nextPage = nextPage + 1; 
        var content = $(data).find('.uiGrid tbody').html(); 

        $('.uiGridContent tbody').last().after('<tbody id="page-'+nextPage+'">'+content+'</tbody>'); 

       }, 
       error: function(data) { 

        alert(data); 

       } 
      }); 

     } 

     lastScrollTop = st; 


    // We're scrolling up 
    } else { 

     if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) { 

      var pageToRemove = $('.uiGridContent tbody').last(); 

      if(pageToRemove.attr('id') != 'page-1') { 
       pageToRemove.remove(); nextPage = nextPage - 1; 

      } else { 
       $('.uiGridContent').scrollTo(0,0); 
      } 

     } 

     lastScrollTop = st; 

    } 

}); 

L'idea è che, come l'utente scorre lungo il tavolo, caricherà nella pagina successiva quando raggiungono la parte inferiore dell'ultimo tbody nel div gridcontent. Che funziona bene!

Il problema si trova con il backup di scorrimento. Dove il piano è quello di renderlo in modo tale che quando l'utente scorre di nuovo oltre l'ultimo tbody lo rimuove di nuovo fino a quando non finisce con un solo tbody rimanente (l'originale in questo caso). Ciò che accade in realtà non appena iniziano a scorrere, rimuove tutti tranne il primo, o a volte non riesce a scorrere verso l'alto e porta l'utente in cima senza rimuovere tutti gli altri tbodys.

Qualche idea? Penso che il problema risieda nell'istruzione if:

if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) { 

sotto la sezione di scorrimento verso l'alto.

Answer 1

Sì, hai ragione, il problema è che condizione utilizzata nella dichiarazione if:

if ($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height())

Questo chiede se lo scrollTop di .uiGridContent più è .innerHeight() è maggiore dell'altezza di l'ultimo elemento tbody. Questo è simile a chiedere se la parte inferiore del riquadro scorrevole sia sotto l'altezza dell'ultimo elemento tbody se fosse posizionato nella parte superiore di .uiGridContent. Non è quello che vuoi.

Quello che vuoi è chiedere se il fondo del riquadro scorrevole è sopra la parte superiore dell'ultimo elemento tbody. Dal momento che si preoccupano solo l'ultimo, è possibile utilizzare:

if ($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() <= ($this[0].scrollHeight - $('.uiGridContent tbody').last().height()))

Anche si vuole veramente essere la memorizzazione nella cache quelle ripetute chiamate a $(...) come ho fatto in questa demo:

http://jsfiddle.net/anmkU/3/

E potresti voler memorizzare l'idea di una scrollBottom (la distanza tra la parte inferiore del contenuto e la parte inferiore dell'area visibile) mentre la utilizzi a prescindere, e probabilmente aiuta la r eadability:

http://jsfiddle.net/anmkU/5/