Для своего небольшого приложения на 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()
дает уже другое, более верное значение.
В чем может быть проблема?