Прокрутка и управление контентом

1) Зачем продумывать прокрутку

• ускоряет поиск нужного контента (меньше кликов — больше скроллов),
• дает ощущение контроля (якоря, «вернуться к началу», прилипшие фильтры),
• экономит ресурсы (ленивая загрузка, виртуализация),
• увеличивает конверсию (контент виден раньше, CTA — в «зоне большого пальца»).

Принципы: скорость > плотность; контекст > шум; предсказуемость > «магия».

2) Модели прокрутки: когда что выбирать

1. Классическая пагинация

Подходит для результатов поиска, таблиц, отчетности. Плюсы: контроль, стабильные URL, легкая навигация по страницам. Минусы: больше кликов, «разрывы» внимания.

2. Бесконечная лента (infinite scroll)

Для фидов и каталогов с низкой стоимостью ошибки (новости, карточки контента). Плюсы: вовлечение, меньше кликов. Минусы: «потерянный футер», тяжело вернуться, сложная адресация.

3. Гибрид: «Показать еще»/«Загрузить еще»

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

4. Сегментированная прокрутка (разделы/якоря)

Для длинных статей, справок и wiki. Плюсы: карта документа, быстрые прыжки. Минусы: усложнение навигации и оглавления.

• Каталоги/лобби — гибрид или бесконечная + «вернуться к началу».
• Поиск/таблицы — пагинация с размером страницы и быстрыми фильтрами.
• Документация/лонгрид — сегменты с TOC и прогресс-баром чтения.

3) Информационная архитектура и раскладка

Верхняя шапка (sticky): поиск, быстрые фильтры, сортировка; не перекрывает контент при появлении.
Боковая панель (desktop): оглавление (TOC), фильтры; на мобайле — выезжающий sheet.
Sticky-элементы: верхние фильтры, якорное меню, прогресс-индикатор чтения, «Back to Top».
Карточки контента: предсказуемая высота превью → меньше скачков макета.
Пустые состояния: скелетоны/шиммеры, а не «пустые экраны».

4) Поведение прокрутки (микромеханика)

Инерция и физика: прокрутка должна казаться «нативной»; не ломайте системные паттерны.
Осевой лок: при горизонтах (карусели) блокируйте вертикальную ось после порога движения.
Snap-точки: уместны для каруселей, карточек и шагов мастера. Не злоупотребляйте в длинных лентах.
Anchored scrolling: при дозагрузке сохраняйте фокус пользователя и относительную позицию.
Scroll-chaining: ограничивайте «протекание» событий из вложенных контейнеров, чтобы не «перепрыгивать» к странице.

5) Управление вниманием

Плавающий CTA/«Депозит»/«Играть»: в зоне большого пальца, не перекрывает контент.
Прогресс-бар чтения: линейка сверху, синхронизирована с якорями.
Оглавление (TOC): текущий раздел подсвечен, быстрые ссылки, кнопка «наверх».
Якоря заголовков: стабильные хэши в URL; скролл с компенсацией высоты шапки.
Контекстные «липкие» фильтры: закреплять после прокрутки 1–2 экранов.

6) Загрузка и рендеринг больших лент

Ленивая загрузка (lazy): изображения, видео, блоки. Порог подгрузки — ~1–2 экрана впереди.
Виртуализация/оконный рендер (windowing): отрисовывайте только видимую область + буфер.
Плейсхолдеры/скелетоны: предсказуемые размеры, без «скачков».
Дозагрузка партиями: шаг 20–60 элементов; баланс между запросами и рендерами.
Кэш секций: при возврате назад восстанавливайте позиции и загруженные чанки.

7) Управление контентом в ленте

Группировка: по датам/категориям; заголовки-разделители прилипают.
Сортировки и фильтры: видны и доступные, с индикацией активных условий.
Свернуть/развернуть: для длинных описаний — «Показать больше».
Медиа в скролле: авто-пауза видео вне видимой области; авто-плей только без звука и с явным управлением.
Состояния ошибок: «Потеря сети», «Не удалось загрузить» — с retry и сохранением позиции.

8) Доступность и локализация

Все действия доступны без жестов: кнопка «Загрузить еще», «К началу», «Открыть TOC».
Фокус-менеджмент: при навигации по якорям — перенос фокуса к заголовку раздела.
Читатели экрана: описания для кнопок прокрутки/TOC, логика порядка.
RTL: зеркалируйте горизонтальные карусели и индикаторы.
Reduced motion: отключайте «сложные» анимации и параллакс для предпочитающих упрощенные эффекты.

9) Перформанс: цели и метрики

INP (Interaction to Next Paint) ключевых жестов/скролла: ≤ 200 мс.
Scroll-jank (пропуски кадров при скролле): < 1% кадров > 16,7 мс на типовых девайсах.
CLS (кумулятивный сдвиг макета): ≤ 0,1 (особенно во время дозагрузки).
TBT/Blocking: избегайте тяжелых синхронных вычислений во время скролла.
Память: стабильное использование при длинных сессиях (нет утечек при виртуализации).

• пассивные слушатели скролла, отложенные вычисления через `requestAnimationFrame`;
• «легкие» тени/без сложных blur во время прокрутки;
• фиксированные или предсказуемые размеры карточек;
• экономия перерисовок (batched updates).

10) Телеметрия и события

• `scroll_start` / `scroll_end` (источник, скорость, направление),
• `content_load_request/success/fail` (пачка, размер),
• `viewport_item_exposed` (id, время видимости),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• `list_restore` (позиция, время восстановления).

• Depth Reached (сколько экрапов/элементов просмотрено),
• Exposure Time per Item (среднее/медиана),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (вышли до загрузки следующей партии),
• Return-to-Position Success.

11) Паттерны для разных типов контента

Каталоги игр/товаров: гибридная лента, sticky-фильтры, виртуализация, кнопка «Показать еще».
Лонгриды/wiki: TOC, прогресс-бар, якоря, «копировать ссылку на раздел».
Новостной фид: бесконечная лента с датами-разделителями, «вернуться к последним».
Таблицы/гриды: пагинация + «показать по N», заморозка заголовков и ключевых колонок, горизонтальный скролл по необходимости.
Live-ленты/лог-стримы: авто-подскролл с «пауза/догнать», лимит буфера.

12) Мобильные особенности

Зоны большого пальца: CTA и «к началу» — снизу; фильтры — в выезжающем sheet.
«Вытягивающий» футер: показывать только при остановке; не мешать скроллу.
Жесты: горизонтальные карусели — с осевым локом; pull-to-refresh — только там, где это ожидаемо.
Плавность: проверка 60 FPS на «тяжелых» списках; снижайте плотность эффектов.

13) Антипаттерны

«Бесконечная лента + скрытый футер без выхода» (нет ссылок/контактов/правил).
Дозагрузка, которая сдвигает прочитанное — потеря контекста.
Плавающие панели, перекрывающие текст и CTA.
Неограниченная высота карточек → «бродящие» layout-shift’ы.
Автовоспроизведение медиа со звуком при появлении в области видимости.
Отсутствие восстановление позиции при «назад».

14) Чек-лист внедрения (по спринтам)

Спринт 1: выбор модели (пагинация/гибрид/бесконечная), базовые скролл-контейнеры, sticky-шапка/фильтры, «Back to Top».
Спринт 2: ленивая загрузка изображений/блоков, скелетоны, предсказуемые размеры карточек.
Спринт 3: виртуализация списков, сохранение позиции и кэш пачек, якоря/TOC.
Спринт 4: телеметрия скролла и экспонирования, а также алерты по scroll-jank.
Спринт 5: доступность (фокус/читатели), RTL, reduced motion, клавиатурная навигация (desktop).
Спринт 6: тонкая оптимизация: осевой лок, snap-точки, улучшение UX медиа в ленте.

15) Глоссарий

Infinite Scroll — бесконечная подгрузка элементов.
Windowing/Virtualization — рендер только видимых элементов списка.
Anchored Scrolling — сохранение относительной позиции при дозагрузке.
Scroll-jank — «дерганья» из-за пропуска кадров при прокрутке.
TOC (Table of Contents) — оглавление с якорями.
CLS/INP — метрики стабильности макета и отзывчивости.

16) Итог

1. выбирает подходящую модель потока (пагинация/гибрид/бесконечная),

2. дает контроль (якоря, TOC, sticky-фильтры, «к началу»),

3. рендерит быстро и стабильно (ленивая загрузка, виртуализация, без сдвигов),

4. остается доступным и предсказуемым,

5. измеряет телеметрию и улучшает UX на основе данных.