[Javascript] Sistema di caricamento dinamico in base allo scrolling

[MarcoGrazia]

Ciao, dovrei ricreare un sistema di caricamento dinamico per un sito di immagini e ho pensato di legarlo allo scrolling, così come avviene in molti siti.
Di per se non è complicatissimo, ho pensato a qualche cosa del genere:

$(document).ready(function()
{
  var limit = 1, scroll = $(elemento contenitore).height();
  $('elemento contenitore').on( 'scroll', function()
  {
    if ( $(document).scrollTop() > scroll )
    {
      scroll = scroll + 100;  //  Aumento il prossimo limite di scroll
      $('elemento contenitore').load( 'funzione.php', {id: limit}, function()
      { 
         ... qui il caricamento dinamico del resto della pagina ... 
         limit = limit + 10;  //  Limite per la query sql.
      });
    }
  };
});

E' solo una bozza!
Limit contiene il limite per la prima query che deve scaricarmi un'altra parte del database ( mettiamo thread di un forum come questo ), scroll parimenti il limite di pagina da cui partire con lo scaricamento del prossimo blocco di thread, ovvero, se scrollando l'utente arriva alla fine schermo, parte la richiesta ajax.
Scroll viene incrementato di un valore ( quanto? Io ho messo arbitrariamente 100px ma c'è la possibilità di scoprire un valore dinamico valido? Non tutti i dispositivi sono uguali ), questo nuovo valore sarà ogni volta il nuovo punto di scarico, che oltre a scaricare dal database aumenta il limit di un certo valore.
Devo mettere un fine, o posso semplicemente tralasciare e verificare la fine del database tamite PHP/MySQL? Credo che qust'ultima opzione sia la migliore, ma comunque mi piacerebbe, una volta arrivati a fine database, comunque di non incrementare ulteriormente lo scroll.
A tal proposito ho scoperto leggendo la documentazione di jquery, che c'è la possibilità di staccare l'evento specifico con $('elemento').off( 'scroll' ); ( per questo non ho usato lo short hand nel codice )
Anzi, trovare un modo per evitare, se l'utente risale in cima, di ricominciare a scaricare anche quello che ha già scaricato, la banda mensile costa ed è limitata!
A tal proposito pensavo che la variabile globale limit possa funzionare allo scopo; quello che è stato scaricato ha anche un preciso limit e quindi scarica solo dal nuovo limit!
Complicato? Sì, forse, bo!
Idee?

 

[MarcoGrazia]

Aggiornamento
Sto cercando qua e là e ho più confusione ora di quando son partito, comunque per risolvere il problema del punto di scrolling dal quale far partire il caricamento, forse ho risolto così:

$( window ).on( "scroll", function() {
   var currentTop = $( this ).scrollTop(),
       elementTop = $( "#arrivo" ).offset().top;
       
       if( currentTop >= elementTop ) {
           // Azione
       }

});

....
pagina
....
<section id="contenitore">
  <article>Bla bla bla</article>
  <article>Foo foo foo</article>
  <article>Bar bar bar</article>
  ...
  <div id="arrivo"></div>
</section>

In pratica, quando faccio lo scrolling della pagina, arrivo al div#arrivo e a quel punto entro nel selettore identificato dal remark // Azione e da li carico dinamicamente dentro section#contenitore un nuovo gruppo di articoli. Ovviamente dopo l'ultimo articolo caricato
Rimangono parecchie cose da vedere, tipo cosa succede se torno in su e poi in giù nella pagina?
L'idea per evitare che l'azione di scaricamento si ripeta è quello di usare un meccanismo di cache, ma forse, e per ora dico forse, risalendo nella pagina si è fatto scendere l'elemento div#arrivo e quindi fino a quando non scrollo ancora oltre quel punto non dovrebbe riscaricarmi nulla, bo, non so, bisogna che faccia delle prove.

 

[MarcoGrazia]

Trovata una soluzione nel sito dell'amico Gabriele Romanato: https://gabrieleromanato.com/2014/05/come-posso-creare-leffetto-infinite-scroll-con-jquery/

 

[MarcoGrazia]

Ce l'ho fatta!
http://www.minigiochi.it/test/MG/index.php
E' solo un test, specifiche e spiegazioni un'altra volta, sono stanco.