JavaScript Academy · Урок

Бесконечная прокрутка

Загружайте новое содержимое по мере прокрутки пользователем.

«Бесконечная прокрутка» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое бесконечная прокрутка

Бесконечная прокрутка автоматически загружает дополнительное содержимое, когда пользователь приближается к концу списка, вместо необходимости нажимать «Следующая страница». Её часто используют в социальных лентах и результатах поиска.

Шаблон sentinel

Самый аккуратный приём использует sentinel — пустой элемент, размещённый в конце списка. Когда sentinel попадает в область просмотра, вызовите fetch и добавьте следующую порцию данных.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Наблюдение за sentinel

Направьте observer на sentinel. Поскольку он находится после последнего элемента, его видимость означает, что пользователь достиг конца списка.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Запуск загрузки

В функции обратного вызова проверьте isIntersecting. Если значение истинно, загрузите данные следующей page.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

Отслеживание page

Храните счётчик page, чтобы при каждой загрузке получать следующий фрагмент данных. Увеличивайте его после успешного получения данных.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Защита от двойной загрузки

Функция обратного вызова может срабатывать многократно. Используйте флаг loading, чтобы новая загрузка не начиналась, пока предыдущая ещё выполняется.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Добавление новых элементов

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

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

Остановка в конце

Когда сервер больше не возвращает данные, вызовите disconnect для observer, чтобы он перестал пытаться загружать содержимое. Это предотвращает бесконечные пустые запросы.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

Преимущество rootMargin

Большой rootMargin — например, 200px — начинает загрузку ещё до того, как пользователь действительно достигнет конца. Поэтому новые элементы появляются плавно, без заметной паузы.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Замечания о доступности

Бесконечная прокрутка может запереть пользователей клавиатуры и программ чтения с экрана, а также скрыть нижний колонтитул. Рассмотрите возможность добавить обычную кнопку «Загрузить ещё» как резервный вариант и вежливо объявляйте о новом содержимом с помощью живых областей ARIA.

Полный процесс

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

Быстрая проверка

Проверьте, насколько хорошо вы поняли принцип бесконечной прокрутки.

Повторение

Вы реализовали бесконечную прокрутку:

Разместите sentinel после списка.
Наблюдайте за ним с помощью observer.
При пересечении вызывайте fetch и добавляйте следующую page.
Используйте флаг loading, чтобы избежать повторных загрузок.
Прекращайте наблюдение, когда данные заканчиваются.

Далее — анимации, запускаемые прокруткой.

Часто задаваемые вопросы

Урок «Бесконечная прокрутка» бесплатный?

Да — полный текст урока «Бесконечная прокрутка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Бесконечная прокрутка»?

Загружайте новое содержимое по мере прокрутки пользователем. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Бесконечная прокрутка»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy