плагин jquery с бесконечной прокруткой

Для этого вам не нужен плагин бесконечной прокрутки. Чтобы определить, когда прокрутка достигает конца страницы, с помощью jQuery вы можете сделать

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

Демо на JsFiddle

Я использую ответ Хусейна с запросами AJAX. Я изменил код так, чтобы он запускался на 300 пикселей вместо 10 пикселей, но это начало вызывать умножение моих добавлений до того, как запрос AJAX был завершен, поскольку вызов прокрутки срабатывает гораздо чаще в диапазоне 300 пикселей, чем в диапазоне 10 пикселей.

Чтобы исправить это, я добавил триггер, который срабатывает при успешной загрузке 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 () теперь проверяйте, равен ли результат вашей высоте документа или нет. если он равен, значит, вы достигли конца. Мы также добавляем 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 примера ленты с лентой в качестве скроллера