Эффект “Бесконечной прокрутки” в HTML-таблице [закрыт]

StackOverflow https://stackoverflow.com/questions/216588

Вопрос

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

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

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

Кстати, прямо сейчас я использую Доступный для обработки YUI

Это было полезно?

Решение

Спасибо за ваши ответы. Это мой последний рабочий код (вдохновленный Грегом и 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:)

Другие советы

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

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

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

Я только что погуглил и нашел эту статью: Реализация динамической прокрутки с помощью Ajax , JavaScript и XML . Это похоже на подробное объяснение.

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top