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