Альтернативы бесконечной прокрутке в jQuery - PullRequest
19 голосов
/ 30 января 2011

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

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

Ответы [ 6 ]

61 голосов
/ 30 января 2011

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

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

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

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

Вдохновленный этим ответом 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();
});
7 голосов
/ 06 ноября 2012

Сочетание ответа Эргека и комментария Пера:

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).

5 голосов
/ 30 января 2011
3 голосов
/ 16 апреля 2012

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

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

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

1 голос
/ 15 июня 2015

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

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 голос
/ 08 июля 2013

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...