Frage Alternativen zu jQuery endlos scrollen


Gibt es Alternativen zum jQuery endlosen Scroll-Plugin?

http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/


20
2018-01-30 06:48


Ursprung


Antworten:


Zum Beispiel die unendliches Scroll-Plugin


6
2018-01-30 07:48



Dies sollte den gleichen Trick ohne Plugin tun

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

BEARBEITEN 15. Januar 2014

Laut @ pere's Kommentar, Es ist besser, den folgenden Code zu verwenden, um eine übermäßige Menge an Ereignisfeuern zu vermeiden.

Inspiriert von dieser Antwort https://Stackoverflow.com/a/13298018/153723

var scrollListener = function () {
    $(window).one("scroll", function () { //unbinds itself every time it fires
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
            //Add something at the end of the page
        }
        setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};
$(document).ready(function () {
    scrollListener();
});

61
2018-01-30 09:50



Ergecs Antwort und Pere's Kommentar kombinieren:

function watchScrollPosition(callback, distance, interval) {
    var $window = $(window),
        $document = $(document);

    var checkScrollPosition = function() {
        var top = $document.height() - $window.height() - distance;

        if ($window.scrollTop() >= top) {
            callback();
        }
    };

    setInterval(checkScrollPosition, interval);
}

distance ist die Anzahl der Pixel vom unteren Bildschirmrand, wenn der Callback ausgelöst wird.

interval Wie oft wird die Prüfung ausgeführt (in Millisekunden; 250-1000 ist sinnvoll).


8
2017-11-06 12:04



Ich denke, es ist besser, es selbst in jQuery zu programmieren, anstatt ein Plugin zu verwenden, da die meisten Male benutzerdefinierte Funktionen gewünscht werden.

Vor einigen Monaten habe ich ein Beispiel mit jQuery Mobile, JSON, PHP und MySQL, siehe Demo läuft. Wie Sie sehen können, gibt es in JavaScript nicht viele Zeilen, und es wird auch vorab geladen, um das Ergebnis sofort anzuzeigen.


5
2017-10-13 07:28



Ich konnte keinen finden, der genau das tat, was ich wollte, also baute ich einen von Grund auf neu. Es hat eine Pause-Funktion, so dass es beim Scrollen nicht endlos weiter lädt. Manchmal möchte jemand den Seitenfuß sehen. Es fügt einfach eine Schaltfläche "Mehr anzeigen" an, um das Anhängen fortzusetzen. Ich habe auch localStorage integriert, so dass ein Benutzer, wenn er wegklickt, seinen Platz in den Ergebnissen nicht verliert.

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

Es hat auch eine Callback-Funktion, die aufgerufen werden kann, um die neu angehängten Ergebnisse zu manipulieren.


4
2018-04-16 12:25



Hier finden Sie eine kleine Anleitung, wie Sie es ohne ein Plugin machen können. http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/


2
2017-07-08 19:08



Dies sollte einen Fehler beheben, bei dem der Benutzer den unteren Rand der Seite erreicht, bevor das Ereignis ausgelöst wird. Ich sah dies in meinem Projekt, das Sie vor der Initialisierung des Ereignisses überprüfen sollten, wenn Sie sich bereits am Ende der Seite befinden.

var scrollListener = function () {
    executeScrollIfinBounds();
    $(window).one("scroll", function () { //unbinds itself every time it fires
       executeScrollIfinBounds();
        setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};
$(document).ready(function () {
    scrollListener();
});

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

1
2018-06-15 01:20