Альтернативы бесконечной прокрутке jQuery

Ответ 1

Например, бесконечный плагин прокрутки

Ответ 2

Это должно сделать тот же трюк без плагина

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

РЕДАКТИРОВАТЬ 15 января 2014 г.

Согласно комментарию @pere, лучше использовать код ниже, чтобы избежать чрезмерного количества срабатывания событий.

Вдохновленный от этого ответа fooobar.com/questions/75012/...

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

Ответ 3

Объединяя ответ Ergec и комментарий Pere:

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 - количество пикселей в нижней части экрана при срабатывании обратного вызова.

interval заключается в том, как часто выполняется проверка (в миллисекундах, 250-1000 является разумным).

Ответ 4

Существует также этот (по-настоящему), который имеет встроенный кэш локального хранилища, позволяющий щелкнуть назад после нажатия на прокрученный контент:

http://pushingtheweb.com/2010/09/endless-scroller-jquery-plugin/

Ответ 5

Я думаю, что лучше самому закодировать его в jQuery, а не использовать плагин, так как большую часть времени вам понадобятся пользовательские функции.

Несколько месяцев назад я закодировал пример с использованием jQuery Mobile, JSON, PHP и MySQL, см. демонстрационная работа. Как вы видите, в JavaScript не так много строк, и он также выполняет предварительную выборку, чтобы мгновенно отображать результат.

Ответ 6

Я не мог найти тот, который сделал именно то, что я хотел, поэтому я построил его с нуля. Он имеет функцию паузы, поэтому он не будет продолжать бесконечную загрузку при прокрутке. Иногда кто-то может захотеть увидеть нижний колонтитул страницы. Он просто добавляет кнопку "Показать больше", чтобы продолжить добавление. Я также включил localStorage, поэтому, когда пользователь щелкает, они не потеряют место в результатах.

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

Он также имеет функцию обратного вызова, которая может быть вызвана для управления недавно добавленными результатами.

Ответ 7

Здесь у вас есть небольшой путеводитель по тому, как это сделать без плагина. http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Ответ 8

Это должно позаботиться об ошибке, когда пользователь дойдет до нижней части страницы до того, как произойдет пожар. Я видел это в своем проекте, который вы должны проверить перед инициализацией события, если вы уже находитесь в нижней части страницы.

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