0Pricing
HTML Academy · Урок

Реализация бесконечной прокрутки

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

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

Шаблон

Бесконечная прокрутка загружает новое содержимое, когда пользователь приближается к концу списка. Самый чистый вариант — использовать IntersectionObserver: разместите элемент «sentinel» в конце списка и наблюдайте за ним. Когда sentinel входит в область просмотра, загрузите следующую page.

Элемент sentinel

Добавьте невидимый <div> (или заполнитель «loading...») после последнего элемента списка. Наблюдайте за ним с помощью IntersectionObserver. При пересечении это означает, что пользователь прокрутил страницу почти до конца, — пора загружать дополнительные данные.

<ul id="feed">
  <li>Post 1</li>
  <li>Post 2</li>
</ul>
<div id="sentinel" aria-hidden="true"></div>

Цикл observer

При пересечении: загрузите следующую page, отрисуйте новые элементы и переместите sentinel (он автоматически остаётся в конце списка, если добавлять элементы перед ним). Прекращать и возобновлять наблюдение не нужно — sentinel по-прежнему наблюдается.

const sentinel = document.getElementById("sentinel");
const feed = document.getElementById("feed");
let page = 1;
let loading = false;
const observer = new IntersectionObserver(async (entries) => {
  if (!entries[0].isIntersecting || loading) return;
  loading = true;
  const items = await fetchPage(page++);
  items.forEach((it) => feed.insertAdjacentHTML("beforeend", renderItem(it)));
  loading = false;
});
observer.observe(sentinel);

Защита состояния loading

Логический флаг loading предотвращает накопление запросов, если пользователь быстро прокручивает страницу и вызывает несколько пересечений до получения первого ответа. Без него одна и та же page загружается повторно, а элементы дублируются.

Конец данных

Когда сервер возвращает пустую page (или сообщает «больше нет данных»), прекратите наблюдение за sentinel и замените его сообщением о конце списка. Будущие пересечения не запускают загрузку; пользователь видит, что достиг конца.

Обработка ошибок

Оберните запрос в конструкцию обработки ошибок. При ошибке оставьте loading включённым, чтобы повторные попытки не запускались автоматически; покажите кнопку «Повторить», которая сбрасывает loading и заново запускает загрузку. Иначе сбои сети приведут к лавине повторных попыток.

rootMargin для упреждающей загрузки

rootMargin: "500px" запускает следующую загрузку за 500 пикселей до того, как пользователь достигнет sentinel. Настройте значение с учётом высоты элементов и средней скорости прокрутки: слишком маленькое значение приводит к сообщению «данных ещё нет», а слишком большое — к загрузке данных заранее.

Восстановление положения прокрутки

Когда пользователь уходит со страницы и возвращается, положение прокрутки должно сохраняться, а ранее загруженные элементы — отображаться снова. Кэшируйте элементы в sessionStorage или в хранилище в стиле Zustand; восстанавливайте их при монтировании и вызывайте scrollTo для запомненного смещения.

Использование памяти

Длинные бесконечные прокрутки накапливают тысячи узлов DOM. Для очень длинных лент (Twitter, Facebook) сочетайте это с оконной виртуализацией: удаляйте из DOM элементы выше области просмотра и восстанавливайте их при прокрутке вверх. Библиотеки вроде react-virtual или @tanstack/virtual эффективно справляются с этим.

Доступность

Бесконечная прокрутка неудобна пользователям клавиатуры и программ чтения с экрана, которым сложно добраться до подвала страницы. Предоставьте альтернативную кнопку «Загрузить ещё» и убедитесь, что на странице есть настоящий подвал, доступный с помощью клавиш Home/End. Поможет и область aria-live, объявляющая о новых элементах.

Отскок при прокрутке на мобильных устройствах

Отскоковая прокрутка iOS может вызывать пересечения несколько раз вблизи нижней границы. Защита загрузки обрабатывает большинство случаев; можно также добавить задержку в 300 мс, чтобы отфильтровать всплеск пересечений во время отскока.

Альтернатива: пагинация по курсору

Серверные интерфейсы должны возвращать «следующий курсор», а не полагаться на отслеживаемые клиентом номера page — это устойчиво к вставке и удалению элементов во время прокрутки. Клиент передаёт курсор в каждом запросе и прекращает работу, когда сервер не возвращает курсор.

Проверка знаний

Почему в callback IntersectionObserver для бесконечной прокрутки необходим флаг загрузки?

Итоги

При бесконечной прокрутке на элементе-маяке в конце списка используется IntersectionObserver. При пересечении загрузите следующую страницу, отрисуйте её и продолжайте наблюдение. Защитите логику флагом загрузки, корректно обработайте конец данных и ошибки, настройте rootMargin для определения расстояния предварительной загрузки. Предусмотрите альтернативу для клавиатуры — кнопку «Загрузить ещё», а для очень длинных лент рассмотрите оконный рендеринг.

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

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

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

Чему я научусь в уроке «Реализация бесконечной прокрутки»?

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

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

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

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

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

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

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

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

  1. API IntersectionObserver и пороговые значения
  2. Отложенная загрузка с IntersectionObserver
  3. Реализация бесконечной прокрутки
  4. Настройка анимаций, связанных с прокруткой
← Назад к HTML Academy