0

Для своего небольшого приложения на meteor.js я хочу сделать бесконечную прокрутку. Я воспользовался примером реализации из статьи https://gentlenode.com/journal/meteor-21-pagination-system-with-infinite-scroll/43
Эта реализация опирается на отлавливание события scroll.

$(window).scroll(function() {
   if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
      incrementLimit();
    }
});

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

Однако, я столкнулся с проблемой. Ниже часть моего кода:

Template.content_table_tmpl.rendered = function () {
    // is triggered every time we scroll
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            incrementLimit();
        }
    });

    if (($(window).height() >= $(document).height())){
        console.log($(window).height() , $(document).height());
        incrementLimit();
    }
    if (($(window).height() >= $(document).height())){
        console.log($(window).height() , $(document).height());
        incrementLimit();
    }
}

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

Сама проблема в том, что в процессе выполнения в консоль оба раза выводятся одни и те же значения. Второй if выполняется, даже если после первого появляется полоса прокрутки.
В браузере из консоли $(document).height() дает уже другое, более верное значение.

В чем может быть проблема?

1 ответ 1

0

Второе выполняется так же как первое, потому что оно выполняется ПРЯМО СРАЗУ, то есть оно не ждет, когда сработает первый incrementLimit(). Можете проверить это обернув второй кусок setTimeout().

И что будет, если сделать вот так? По идее сразу отработает как надо при загрузке страницы:

Template.content_table_tmpl.rendered = function () {
    // is triggered every time we scroll
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            incrementLimit();
        }
    }).scroll();
}

Так оно отработает один раз. + внутри incrementLimit() ПОСЛЕ загрузки новой порции проверять еще раз, если необходимо.

1
  • Воспользовался вашим советом и все заработало как часы. Благодарю за ответ!
    – Arca
    21 апр 2015 в 7:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.