web-dev-qa-db-fra.com

plugin jquery à défilement infini

J'essaie de configurer Infinite-Scroll sur un site que je développe avec Coldfusion. Javascript et jquery sont nouveaux pour moi. J'ai donc quelques problèmes à résoudre. Dois-je avoir une pagination sur mon site pour pouvoir utiliser le plugin infinite-scroll, ou y a-t-il un moyen de le faire sans cela?

javascriptjquerycssinfinite-scrolljquery-infinite-scroll
68
rajh2504

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

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

Démo sur JsFiddle

127
Hussein

J'utilise la réponse de Saddam Hussein avec des requêtes de AJAX. J'ai modifié le code pour qu'il déclenche à 300px au lieu de 10px, mais il a commencé à provoquer la multiplication de mes ajouts avant la fin de la demande AJAX, car l'appel de 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 du chargement réussi AJAX. 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 défini scrollLoad sur true.

23
Nick

J'ai construit sur le petit exemple de Hussein ici 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, ce qui nécessite un clic pour continuer.

Essaie:

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

10
Hawkee

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...
    };
});

Aussi, si vous voulez plus d’informations, consultez cette page comment créer un défilement infini sur le manuel jquery http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with -ajax-on-jquery/

4
Nico Bistolfi
$(function(){ 
    $(window).scroll(function(){
           if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
               alert('end of page');
           }
       });
});

Quelqu'un a demandé une explication alors voici l'explication

here $ (document) .height () -> est la hauteur de l'ensemble du document. Dans la plupart des cas, elle est égale à l'élément du document actuel.

$ (window) .height () -> est la hauteur de la fenêtre (navigateur) signifie la hauteur de tout ce que vous voyez sur le navigateur.

$ (window) .scrollTop () -> La propriété Element.scrollTop obtient ou définit le nombre de pixels que le contenu d'un élément fait défiler vers le haut. ScrollTop d'un élément est une mesure de la distance entre le sommet d'un élément et son contenu visible le plus élevé. Lorsqu'un contenu d'élément ne génère pas de barre de défilement verticale, sa valeur scrollTop est définie par défaut sur 0.

$(document).height()<=$(window).scrollTop()+$(window).height()+100

add $ (window) .scrollTop () avec $ (window) .height () vérifie maintenant si le résultat est égal à la hauteur de votre document ou non. si elle est égale, cela signifie que vous avez atteint la fin. Nous ajoutons 100 aussi, car je veux vérifier avant les 100 pixels du bas du document (note <= in condition)

s'il vous plait corrigez moi si je me trompe

2
venkatesh

J'ai écrit cette fonction en utilisant les idées de Hussein et Nick, mais je voulais qu'elle utilise promesses pour le rappel. Je voulais aussi que la zone de défilement infini soit sur un div fixe et pas seulement la fenêtre si le div est envoyé dans l'objet options. Il y a un exemple de cela dans mon deuxième lien ci-dessous. Je suggère d'utiliser une bibliothèque de promesses telle que Q si vous souhaitez prendre en charge les navigateurs plus anciens. La méthode cb peut être ou ne pas être une promesse et cela fonctionnera quand même.

Il est utilisé comme suit:

html

<div id="feed"></div>

js

var infScroll = infiniteScroll({
    cb: function () {
        return doSomethingPossiblyAnAJAXPromise();     
    }
});

Si vous souhaitez que le flux soit temporairement arrêté, vous pouvez renvoyer false dans la méthode cb. Utile si vous avez atteint la fin du flux. Il peut être redémarré en appelant la méthode d'objet retournée par infiniteScroll 'setShouldLoad' et en lui passant true et example pour accompagner le code ci-dessus.

infScroll.setShouldLoad(true);

La fonction de défilement infini est la suivante

function infiniteScroll (options) {
    // these options can be overwritten by the sent in options
    var defaultOptions = {
        binder: $(window), // parent scrollable element
        loadSpot: 300, //
        feedContainer: $("#feed"), // container
        cb: function () { },
    }

    options = $.extend(defaultOptions, options);
    options.shouldLoad = true;

    var returnedOptions = {
        setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
    };

    function scrollHandler () { 
        var scrollTop = options.binder.scrollTop();
        var height = options.binder[0].innerHeight || options.binder.height();
        if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
            options.shouldLoad = false;
            if(typeof options.cb === "function") {
                new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
                    if(typeof isNotFinished === "boolean") {
                        options.shouldLoad = isNotFinished;
                    }
                });
            }
        }
    }

    options.binder.scroll(scrollHandler);

    scrollHandler();

    return returnedOptions;

}

1 exemple d'alimentation avec une fenêtre comme défilement

2 exemple d'alimentation avec une alimentation en défilement

0
John

Si vous avez un élément à défilement, comme un div avec débordement de défilement, mais aucun document/page à défilement, vous pouvez procéder de cette façon.

       $(function () {
            var s = $(".your-scrollable-element");
            var list = $("#your-table-list");

            /* On element scroll */
            s.scroll(function () {
                /* The scroll top plus element height equals to table height */
                if ((s.scrollTop() + s.height()) == list.height()) {
                    /* you code */
                }
            });
        });
0
Vansuita Jr.

J'ai eu le même problème, mais je n'ai pas trouvé de plug-in adapté à mes besoins. alors j'ai écrit le code suivant. ce code ajoute un modèle à l'élément en obtenant des données avec ajax et pagination . pour détecter quand l'utilisateur fait défiler vers le bas du div

var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();

if (dh - (wh + ws) < dh - (h + t)) {
    //now you are at bottom of #infiniteContent element
}


$(document).ready(function(){
	$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
        appendTemplate(jsonre,1);
    });
});

function appendTemplate(jsonre, pageNumber){
	//instead of this code you can use a templating plugin like "Mustache"
	for(var i =0; i<jsonre.length; i++){
  	$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
  }

  if (jsonre.length) {
    $("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
    $(window).on("scroll", initScroll);
    
    //scroll event will not trigger if window size is greater than or equal to document size
    var dh = $(document).height() , wh = $(window).height();
    if(wh>=dh){
    	initScroll();
    }
  }
  else {
    $("#infiniteContent").attr("data-page", "");
  }
}

function initScroll() {
    var t = $("#infiniteContent").offset().top;
    var h = $("#infiniteContent").height();
    var ws = $(window).scrollTop();
    var dh = $(document).height();
    var wh = $(window).height();

    if (dh - (wh + ws) < dh - (h + t)) {
        $(window).off('scroll');
        var p = $("#infiniteContent").attr("data-page");
        if (p) {
            $.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
                appendTemplate(jsonre, p);
            });
        }
    }
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>

0
Mojtaba