Эффект "Бесконечная прокрутка" в таблице HTML

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

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

Этот эффект можно найти в Google Reader, когда вы прокручиваете список до последнего сообщения в заданном канале, запросы Google и показываете новые сообщения прозрачным способом, но я не могу понять, как они его достигают.

Кстати, прямо сейчас я использую YUI Datatable

Ответы

Ответ 1

Спасибо за ваши ответы. Это мой последний рабочий код (вдохновленный Грегом и ajaxian.com), который использует некоторые функции jQuery и работает с YUI DataTable.

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

Мой следующий шаг - реализовать мою собственную YUI Paginator для полной интеграции с компонентами YUI:)

Ответ 2

Я не знаком с конкретным элементом, который вы используете, но в порядке  для реализации этого в окне полного размера вы можете сделать следующее:

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

Где scrollTop по существу "сколько пикселей было прокручено". Я предполагаю, что применение этого к таблице, с которой вы работаете, будет выполнять эту работу.

Ответ 4

Вы можете увидеть, что он работает здесь YUI. В отличие от одного из предложенных выше решений, полоса прокрутки перемещается непрерывно, положение и размер отражают истинный размер и положение области видимости, она не загружает следующую партию, когда полоса прокрутки достигает дна. Полоса прокрутки достигает дна только тогда, когда последняя из всех записей находится в нижней части области просмотра. Конечно, это работает, только если вы знаете, сколько записей есть.

Ответ 5

Есть свойство, которое я заметил при чтении через DOM-свойства в Firebug сегодня с именем scrollY (в Firebug под вкладкой DOM перейдите к content > scrollY), который представляет собой количество пикселей, оставшихся для прокрутки окно. Попробуйте просмотреть, если это также создано для прокручиваемых элементов. Затем вы можете использовать функцию Yuval для загрузки новых данных.

Ответ 6

Ик. Не большой поклонник бесконечной прокрутки; он нарушает некоторые ключевые предположения, которые люди делают о том, как работает Web. Пожалуйста, пообещайте, что вы его реализуете только при следующих условиях:

1) вы не подставляете его для совершенно хорошей страницы, которая загружает все в хорошую длинную таблицу и позволяет пользователю использовать Ctrl-F для поиска внутри страницы, для какого времени происходит Fringe.

2) вы не планируете вставлять объявление в нижней части каждого фрагмента прокрученных данных.

3) вы обеспечиваете рабочий резерв (эй, там этот хороший длинный стол снова) для слепых людей и людей, просматривающих Интернет с отключенным JavaScript.

Ответ 7

Если вы используете YUI, у него есть tableScrollEvent, который запускается при прокрутке таблицы. Соедините это с функцией dataTable generateRequest, и вы сможете реализовать бесконечную прокрутку, наблюдая tableScrollEvent и начиная запрос, когда вы приближаетесь к концу ваш набор данных.

Документ YUI не имеет конкретного примера для этого случая, но показывает вам как обрабатывать данные, возвращенные функцией generateRequest