Как делается бесконечная прокрутка?

#javascript #php #mysql

Как делается бесконечная прокрутка? Я знаю, что через AJAX, но как там указывается
с какого по какой пост надо вытянуть и т.п.    

Ответы

Ответ 1

ну вообще люди передают номер страницы, через POST, или GET не важно, просто запоминают
какая страница на данный момент открыта и делают ++ при достижении низа скроллером.


Ответ 2

Это называется Cursor Pagination (курсорная пагинация).

Пример:
У вас есть сервер и бд в которой есть 100 постов. Сервер отдает по 10 постов на страницу.
Нумеруемая пагинация делает запрос к серверу и в запросе мы передаем номер страницы
для которой хотим получить 10 постов. В курсорной пагинации все точно так же, только
мы передаем в запросе не любую страницу, а одну за другой:


В клиентском приложении у вас должен быть список постов: postsList и номер
текущей страницы: currentPage.
При загрузке страницы, делается запрос на получение десятка постов.
Когда получили ответ с постами, заносим их в postsList и запоминаем страницу currentPage = 1.
Отлавливаем событие, что пользователь прокрутил список до последнего
поста и делаем запрос на получение десятка постов со
    страницы currentPage + 1.
Полученными данными расширяем postsList(добавляем в конец списка). Запоминаем страницу:
currentPage=2.


Вот собственно и все. Пункты 3 и 4 выполняются до тех пор пока не загрузятся все
100 постов.


Ответ 3

Пример реализации с подробными комментариями:

/*
 * На сколько страниц автоматически прокручиваем до остановки
 */
var maxPages = 3;
/*
 * За сколько до конца страницы включаем прокрутку
 */
var scrollBufferRatio = 1 / 3;
/*
 * Где находится область для дополнения (содержимое)
 */
var elementContainerSelector = '.messages';
/*
 * Что делать если не найден новое содержимое
 */
var elementFindingErrorHandler = function() {
    throw "Could not find " + elementContainerSelector;
};

/*
 * Названия события которое можно изменить 
 * если есть несколько областей прокрутки
 */
var eventName = 'scroll.toInfinity';
/*
 * Где находится выбор страниц для перехода
 */
var pagerSelector = '.pager';
/*
 * Где найти ссылку на следующую страницу
 */
var nextPageSelector = '.pager .nextpage';

var $window = $(window);
// инициализируем при загрузке страницы
var $elementContainer;
var topOffset = 0,
    scrollBuffer = 1,
    pageCounter = 1;

var eventProcessor = function(finished) {
    // позиция прокрутки когда должна сработать загрузка
    // считается от фактической высоты содержимого
    var triggerPosition = $elementContainer.height() 
            + topOffset - scrollBuffer;
    // текущая позиция прокрутки по нижней части окна
    var scrollPosition = $window.scrollTop() + $window.height();

    // еще не дошли до нужной точки, ничего не делаем
    if (scrollPosition < triggerPosition) {
        // но ждём дальше
        finished();
        return true;
    }

    // пролистали достаточное число страниц
    if (pageCounter >= maxPages) {
        // дадим выбор пользователю листать ли дальше
        $(pagerSelector).show();
        // не перезапускаем загрузку
        return true;
    }

    // если следующей страницы нет...
    var $nextPage = $(nextPageSelector);
    if ($nextPage.length == 0) {
        // то и загружать дальше нечего
        return true;
    }

    $.get($nextPage.attr('href'), function(data) {
        var $data = $(data);

        // найдем содержимое в следующей странице
        var $newContent = $data.find(elementContainerSelector);
        if ($newContent.length == 0) {
            // если элемент не найден, он может быть корневым
            $newContent = $data.filter(elementContainerSelector);
        }
        // если ничего не найдено, то это конкретно ошибка
        if ($newContent.length == 0) {
            elementFindingErrorHandler();
        }

        // содержимое из следующей страницы допишем 
        // к содержимому страницы в окне
        $elementContainer.append($newContent.first().html());

        // найдем выбор страниц на следующей странице
        var $newPager = $data.find(pagerSelector);
        if ($newPager.length == 0) {
            // корневой элемент тоже поищем
            $newPager = $data.filter(pagerSelector);
        }
        // заменим выбор страниц новым
        var newPager = $newPager.first().html();
        // и скроем его пока не будет нужен
        $(pagerSelector).html(newPager).hide();

    }).always(function() {
        pageCounter += 1;
        // по окончании загрузки снова следим за прокруткой
        finished();
    });
};

var eventTimeout = 0;

var eventHandler = function() {
    // событие на прокрутку должно сработать только один раз
    $window.unbind(eventName);
    clearTimeout(eventTimeout);
    eventTimeout = setTimeout(function() {
        // возьмем небольшую паузу чтобы не считать оставшиеся
        // пиксели при каждом событии прокрутки
        eventProcessor(function() {
            // после окончания загрузки снова ждем прокрутки
            $window.bind(eventName, eventHandler);
        });
    }, 100);
};

$(function() {
    $elementContainer = $(elementContainerSelector);
    // расстояния до элемента от верха экрана
    topOffset = $elementContainer.offset().top;
    // зададим пропорционально изначальной высоте
    scrollBuffer = $elementContainer.height() * scrollBufferRatio;
    $window.bind(eventName, eventHandler);
});


Всё это лучше вызывать в замыкании чтобы не сорить в window.

Взято отсюда, лицензия MIT.