plugin jquery infinite-scroll

Question

J'essaie de mettre en place le défilement infini sur un site que je développe avec Coldfusion. Je suis novice en matière de javascript et de jquery et j'ai donc quelques difficultés à m'y retrouver. Dois-je avoir une pagination sur mon site afin d'utiliser le plugin infinite-scroll, ou y a-t-il un moyen de le faire sans cela ?

Answer 1

Vous n'avez pas besoin du plug-in infinite scroll pour cela. Pour détecter quand le scroll atteint la fin de la page, avec jQuery vous pouvez faire

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

Démo sur JsFiddle

Answer 2

J'utilise la réponse d'Hussein avec des requêtes AJAX. J'ai modifié le code pour qu'il se déclenche à 300px au lieu de 10px, mais mes ajouts ont commencé à se multiplier avant que la requête AJAX ne soit terminée, car l'appel au défilement se déclenche beaucoup plus fréquemment dans une plage de 300px que dans une plage de 10px.

Pour résoudre ce problème, j'ai ajouté un déclencheur qui serait inversé lors d'un chargement AJAX réussi. Mon code ressemble plus à ceci :

var scrollLoad = true;

$(window).scroll(function () { 
  if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
    scrollLoad = false;
    //Add something at the end of the page
  }
});

puis dans ma réponse AJAX, j'ai mis scrollLoad a true .

Answer 3

Je me suis basé sur le petit exemple d'Hussein pour créer un widget jQuery. Il prend en charge localStorage pour enregistrer temporairement les résultats ajoutés et dispose d'une fonctionnalité de pause pour arrêter l'ajout de temps en temps, en demandant un clic pour continuer.

Essayez-le :

http://www.hawkee.com/snippet/9445/

Answer 4

Si vous avez une référence, comme votre pied de page, vous pouvez utiliser ce code, disons que vous avez un div de pied de page avec l'id #footer :

function element_in_scroll(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height();

`var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(document).scroll(function(e){
    if (element_in_scroll("#footer")) {
        //Here you must do what you need to achieve the infinite scroll effect...
    };
});` 

Si vous voulez plus d'informations, consultez ce manuel sur la façon de créer un défilement infini sur jquery. http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 5

Essayez de vérifier ce projet :

Backbone Infinite Scroll

Ce n'est pas un plugin jQuery. C'est une sorte de vitrine d'un simple défilement infini.