Comment obtenir le défilement infini au travail?

J’essaie de faire fonctionner ce script de charge infinie dans mon projet.

Voici mon HTML:

 
...

Et voici le script:

 function scrollalert(){ var pages = document.getElementById("scroller").getElementsByTagName("div"); var currentPageId = pages[pages.length - 1]; //console.log("currentPageId is: "+currentPageId); var scrollbox = document.querySelector('#page-container'); var scrolltop = $(window).scrollTop(); var scrollheight = scrollbox.scrollHeight; var windowheight = $(window).height(); var scrolloffset=20; console.log(scrolltop); console.log(scrollheight); console.log(windowheight); console.log(scrollheight-(windowheight+scrolloffset)); if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) { //fetch new items console.log("loading more pages"); (function() { alert('test'); var i; var pagesToLoad = $("#pages-to-load > div").size(); for (i = 0; i < pagesToLoad; i++) { console.log(pagesToLoad[i].id); $.get(pagesToLoad[i].id, function(newitems){ alert('get new page'); $('#scroller').append(newitems); updatestatus(); }) }; })(); }; } 

Quoi que j’essaye, je n’arrive pas à charger et à append mes nouvelles pages. De même, lors du défilement, mes scrollTop et scrollHeight ne changent pas. Je suis sûr qu’il me manque quelque chose d’évident ici. Aussi mes pages à charger sont indéfinies?

Voici un de mes scripts à défilement infini utilisant JQuery qui fonctionne:

Html:

   Scroll Troll Page    



















  

en ligne:

 box.html(box.html + "Place content to expand here"); 

Vous pouvez append le contenu à append à votre conteneur lorsque vous atteignez le bas de la page lors du défilement.

JsFiddle de travail:

http://jsfiddle.net/MdrJ4/3/

J’ai un problème pour utiliser le défilement sans fin, alors j’ai écrit une bibliothèque et résolu mon problème. Je pense que cette bibliothèque peut vous aider à résoudre ce problème. utilisez cette bibliothèque comme un moyen facile d’implémenter le défilement infini:

https://github.com/hamedtaheri32/infinite-scrolling

Exemple :

  

peut utiliser le script ci-dessous

 window.onscroll = function (ev) { let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); let currentScrollHeight = window.innerHeight + window.scrollY; if ((scrollHeight - currentScrollHeight) < 200) { // your statement } }; 

exemple complet dans jsfiddle