jquery плъгин за безкрайно превъртане

За това не се нуждаете от плъгин за безкрайно превъртане. За да откриете кога превъртането достига края на страницата, с jQuery можете да направите това

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

Демо на JsFiddle

Използвам отговора на Хюсеин с AJAX заявки. Модифицирах кода да се задейства при 300px вместо 10px, но това започна да кара моите добавяния да се умножават, преди AJAX заявката да приключи, тъй като извикването за превъртане се задейства много по-често в диапазон от 300px, отколкото в диапазон от 10px.

За да коригирам това, добавих тригер, който ще бъде обърнат при успешно зареждане на AJAX. Моят код изглежда по-скоро така:

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

тогава в моя AJAX отговор задавам scrollLoad на true.

Създадох върху малкия пример на Хюсеин тук, за да направя джаджа jQuery. Той поддържа localStorage за временно запазване на добавени резултати и има функция за пауза, за да спре добавянето от време на време, изисквайки щракване, за да продължите.

Пробвам:

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

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

Някой поиска обяснение, така че ето го обяснението

тук $(document).height()-->е височината на целия документ. В повечето случаи това е равно на елемента от текущия документ.

$(window).height()-->е височината на прозореца (браузър) означава височината на всичко, което виждате в браузъра.

$(window).scrollTop()-->Свойството Element.scrollTop получава или задава броя пиксели, с които съдържанието на елемент се превърта нагоре. ScrollTop на елемент е измерване на разстоянието от върха на елемент до най-горното му видимо съдържание. Когато съдържанието на елемент не генерира вертикална лента за превъртане, тогава стойността му за scrollTop по подразбиране е 0.

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

добавете $(window).scrollTop() с $(window).height() сега проверете дали резултатът е равен на вашата височина на documnet или не. ако е равен, означава, че сте стигнали до края. добавяме и 100, защото искам да проверя преди 100-те пиксела от долната част на документа (забележка ‹= в състояние)

моля, поправете ме, ако греша

Ако имате елемент с възможност за превъртане, като div с преливане на превъртане, но няма документ/страница с възможност за превъртане, можете да поемете по този начин.

       $(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 */
                }
            });
        });

Имах същия проблем, но не намерих подходящ плъгин за моите нужди. така че написах следния код. този код добавя шаблон към елемент, като получава данни с ajax и пагинация. за откриване, когато потребителят превърта до дъното на 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>

Написах тази функция, използвайки идеите на Хюсеин и Ник, но исках да използва обещания за обратното повикване. Също така исках безкрайната зона за превъртане да бъде на фиксиран div, а не само на прозореца, ако div е изпратен в обекта с опции. Има пример за това във втората ми връзка по-долу. Предлагам да използвате библиотека с обещания като Q, ако искате да поддържате по-стари браузъри. Методът cb може или не може да бъде обещание и ще работи независимо от това.

Използва се така:

html

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

js

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

Ако искате подаването да спре временно, можете да върнете false в метода cb. Полезно, ако сте достигнали края на емисията. Може да се стартира отново чрез извикване на върнатия обектен метод на infiniteScroll 'setShouldLoad' и подаване на true и example, за да върви заедно с горния код.

infScroll.setShouldLoad(true);

Функцията за безкрайно превъртане е това

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 пример за емисия с прозорец като скролер

2 пример за емисия с емисия като скролер