Что такое бесконечная прокрутка — и почему до подвала сайта не докрутить

Попробуй найти телефон магазина внизу сайта с бесконечной лентой. Докручиваешь до подвала — а он убегает. Лента подгрузила ещё двадцать карточек и снова отодвинула его вниз.

Это не баг одного сайта. Nielsen Norman Group, главная лаборатория юзабилити, пишет прямо: бесконечная прокрутка без кнопки «Показать ещё» может сделать подвал сайта недостижимым. В их примере — каталог Nike.

Удобная штука для ленты оказалась ловушкой для каталога. Разберём, почему так выходит — и когда её всё-таки брать.

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

Бесконечная прокрутка — это когда список не делится на страницы. Ты листаешь вниз, а новые элементы подгружаются сами, прямо в конец.

Придумали её в 2006 году. Сейчас она почти везде, где контент течёт потоком: TikTok, Instagram, новостные приложения, часть интернет-магазинов.

У неё два родственника. Первый — кнопка «Показать ещё»: новая порция приходит, только когда ты сам нажал. Второй — лента с номерами страниц: прокрутка одна, но в ней видны отметки «страница 2», «страница 3», и к ним можно перейти.

Как она устроена

Под капотом никакой бесконечности нет. Сервер отдаёт список порциями — например, по 20 штук, как при обычной постраничной выдаче. Разница только в том, кто просит следующую порцию.

В конец списка ставят невидимый «маячок». Браузер следит, появился ли он на экране. Появился — значит, ты долистал до конца, и код просит у сервера следующие 20 штук.

const marker = document.querySelector('#list-end');

new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting) return;
  const res = await fetch(`/api/posts?after=${lastId}`);
  const posts = await res.json();
  renderPosts(posts); // дописать карточки в конец списка
}).observe(marker);

IntersectionObserver — встроенный в браузер наблюдатель. Он сообщает, когда элемент попал в видимую часть экрана. Считать пиксели при каждой прокрутке не нужно.

Отсюда же первое следствие. Всё, что стоит ниже маячка, человек увидит только после последней порции. А у бесконечной ленты последней порции нет.

Где она ломается

NN/g перечисляет шесть проблем. Вот четыре, на которые натыкаются первыми.

1. Подвал недостижим. Контакты, доставка, условия возврата живут внизу. Лента каждый раз отталкивает их дальше.
2. «Назад» возвращает в начало. Открыл карточку, вернулся — и ты снова наверху. Тридцать экранов листать заново. С номерами страниц ты вернулся бы хотя бы на одну короткую страницу.
3. Иллюзия конца. Пока новая порция грузится, внизу пусто. Человек решает, что всё посмотрел, и уходит. Особенно если внизу как раз закончился ряд карточек и видна пустая полоса или рекламный блок.
4. Клавиатура и скринридер. С клавиатуры по ленте идут Tab'ом, ссылка за ссылкой — до конца так не дойти. А скринридер, по наблюдению NN/g, может увидеть только первую порцию. Помочь может ARIA-роль feed: она подсказывает скринридеру, что перед ним лента, которая подгружается по ходу чтения.

Есть и пятая проблема, невидимая глазу: поиск. Google находит страницы по адресам из ссылок <a href>. Его краулер не нажимает кнопки и, как правило, не запускает скрипты, которые ждут действий человека. Если товары с 21-го по 1000-й появляются только при прокрутке, для поиска их может не существовать. Как Google вообще находит сайт, мы разбирали в статье что такое SEO.

И шестая — страница тяжелеет. Пятьсот карточек с картинками — это пятьсот картинок в памяти телефона. Если сайт и так тормозит, начни с пяти шагов ускорения.

Когда её брать, а когда нет

Главный вопрос — зачем человек пришёл на страницу.

Бери бесконечную прокрутку, если элементы примерно равноценны и их просто листают: лента соцсети, подборка вдохновения, новости. Здесь каждый клик «Дальше» — лишний повод бросить. NN/g ссылается на исследование: даже короткий перерыв вроде перехода на следующую страницу подталкивает людей переключиться на другое занятие.

Бери страницы или «Показать ещё», если человек ищет, сравнивает и возвращается: каталог, результаты поиска, архив. Там нужны ориентиры вроде «это было на третьей странице, где-то в середине».

Если всё-таки делаешь бесконечную ленту, закрой три дыры:

1. Запоминай место. Храни номер порции в адресе (?page=3) или позицию прокрутки в sessionStorage. При возврате восстанавливай.
2. Остановись после нескольких порций. Через три-четыре подгрузки покажи кнопку «Показать ещё». Подвал снова станет доступен.
3. Покажи, что грузится. Индикатор внизу списка убирает иллюзию конца.

Бесконечная прокрутка вредит SEO?

Сама по себе — нет. Вредит, когда новые порции существуют только в скрипте. Google советует давать каждой порции свой адрес и связывать их обычными ссылками <a href>.

Чем кнопка «Показать ещё» лучше?

Человек сам решает, нужно ли ему больше. Подвал остаётся на месте, а поток не прерывается переходом на новую страницу. NN/g называет такую кнопку компромиссом между двумя схемами.

Как вернуть человека на то же место после «Назад»?

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