wake-up-neo.com

unendliches Scroll-Jquery-Plugin

Ich versuche unendliche Schriftrollen auf einer Site einzurichten, die ich mit Coldfusion entwickle. Ich bin neu in Javascript und Jquery, also habe ich einige Probleme, die meinen Kopf mit all dem zu tun haben. Muss ich auf meiner Website eine Paginierung haben, um das Infinite-Scroll-Plugin verwenden zu können, oder gibt es eine Möglichkeit, dies ohne zu tun?

javascriptjquerycssinfinite-scrolljquery-infinite-scroll
68
rajh2504

Sie benötigen dazu kein unendliches Scroll-Plug-In. Mit jQuery können Sie feststellen, wann der Bildlauf das Seitenende erreicht

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

Demo auf JsFiddle

127
Hussein

Ich verwende Husseins Antwort mit AJAX -Anfragen. Ich habe den Code so geändert, dass er bei 300px anstelle von 10px ausgelöst wird, aber er hat dazu geführt, dass sich meine Anhänge vervielfachten, bevor die Anforderung AJAX beendet wurde, da der Scroll-Aufruf in einem 300px-Bereich viel häufiger ausgelöst wird als in einem 10px-Bereich.

Um dies zu beheben, habe ich einen Auslöser hinzugefügt, der beim erfolgreichen Laden von AJAX umgedreht wurde. Mein Code sieht eher so aus:

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

in meiner Antwort AJAX setze ich scrollLoad auf true.

23
Nick

Ich habe hier auf Husseins kleines Beispiel aufgebaut, um ein jQuery-Widget zu erstellen. Es unterstützt localStorage, um angehängte Ergebnisse vorübergehend zu speichern, und verfügt über eine Anhaltefunktion, um das Anhängen von Zeit zu Zeit anzuhalten, sodass ein Klick erforderlich ist, um fortzufahren.

Versuche es:

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

10
Hawkee

Wenn Sie einen Verweis haben, können Sie diesen Code wie Ihre Fußzeile verwenden. Nehmen wir an, Sie haben eine Fußzeile div mit der 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...
    };
});

Wenn Sie weitere Informationen benötigen, lesen Sie hier, wie Sie einen unendlichen Bildlauf für das Jquery-Handbuch http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery) erstellen /

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

Jemand bat um Erklärung, also hier ist die Erklärung

hier ist $ (document) .height () -> die Höhe des gesamten Dokuments. In den meisten Fällen entspricht dies dem Element des aktuellen Dokuments.

$ (window) .height () -> ist die Höhe des Fensters (Browser), die die Höhe von dem darstellt, was Sie im Browser sehen.

$ (window) .scrollTop () -> Die Eigenschaft Element.scrollTop ermittelt oder legt die Anzahl der Pixel fest, um die der Inhalt eines Elements nach oben gerollt wird. Das scrollTop eines Elements ist ein Maß für die Entfernung des oberen Teils eines Elements zum obersten sichtbaren Inhalt. Wenn ein Elementinhalt keine vertikale Bildlaufleiste generiert, ist der Wert für scrollTop standardmäßig auf 0 gesetzt.

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

fügen Sie $ (window) .scrollTop () mit $ (window) .height () hinzu. Prüfen Sie nun, ob das Ergebnis Ihrer Documnet-Höhe entspricht oder nicht. Wenn es gleich ist, bedeutet dies, dass Sie am Ende erreicht sind. Wir addieren ebenfalls 100, da ich vor den 100 Pixeln vom unteren Rand des Dokuments prüfen möchte (Anmerkung <= in Bedingung).

bitte korrigieren Sie mich, wenn ich falsch liege

2
venkatesh

Ich habe diese Funktion mit Husseins und Nicks Ideen geschrieben, wollte aber Versprechen für den Rückruf verwenden. Ich wollte auch, dass sich der unendliche Bildlaufbereich auf einem festen div befindet und nicht nur das Fenster, wenn das div in das Optionsobjekt gesendet wird. Es gibt ein Beispiel dafür in meinem zweiten Link unten. Ich schlage vor, eine Versprechenbibliothek wie Q zu verwenden, wenn Sie ältere Browser unterstützen möchten. Die cb-Methode kann ein Versprechen sein oder nicht, und sie funktioniert trotzdem.

Es wird wie folgt verwendet:

html

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

js

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

Wenn der Feed vorübergehend angehalten werden soll, können Sie in der cb-Methode false zurückgeben. Nützlich, wenn Sie das Ende des Feeds erreicht haben. Es kann erneut gestartet werden, indem die zurückgegebene Objektmethode 'setShouldLoad' von infiniteScroll aufgerufen wird und true und ein Beispiel übergeben werden, um den obigen Code zu verwenden.

infScroll.setShouldLoad(true);

Die Funktion für das unendliche Scrollen ist dies

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 Vorschubbeispiel mit Fenster als Scroller

2 Vorschubbeispiel mit Vorschub als Scroller

0
John

Wenn Sie über ein scrollbares Element verfügen, z. B. ein div mit Scrollüberlauf, aber kein scrollbares Dokument/Seite, können Sie dies tun.

       $(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.

Ich hatte das gleiche Problem, fand aber kein passendes Plugin für meine Bedürfnisse. Also habe ich folgenden Code geschrieben. Dieser Code hängt die Schablone an das Element an, indem Daten mit Ajax und Paginierung abgerufen werden.

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