Прокрутка

Прокручиваться может вся страница или отдельный блок с overflow: auto — таблица характеристик, окно чата поддержки, лента отзывов. Современные браузеры обычно обрабатывают прокрутку отдельно от основного потока, поэтому она остаётся плавной, даже когда страница занята скриптами, — если сайт ей не мешает.

Чем управлять из CSS

html {
  scroll-behavior: smooth;        /* плавный переход по якорям */
}
h2[id] {
  scroll-margin-top: 80px;        /* не прятать заголовок под шапкой */
}
.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory;  /* карусель с остановкой на слайде */
}
.gallery > img { scroll-snap-align: start; }

Свойство scroll-margin-top решает частую проблему сайтов с закреплённой шапкой: при переходе по якорю заголовок раздела уезжал под неё. Ещё одно полезное свойство — overscroll-behavior: contain: оно не даёт прокрутке «перетечь» из модального окна или бокового меню на страницу под ним.

Прокрутка и JavaScript

Событие scroll срабатывает очень часто, и тяжёлый код в обработчике заставляет страницу дёргаться. Обработчики touchstart и wheel лучше объявлять с параметром { passive: true }: так браузер знает, что прокрутку не отменят, и не ждёт скрипт. Для типовых задач — подгрузить следующую страницу каталога, запустить анимацию при появлении блока — вместо слушания прокрутки используют IntersectionObserver: браузер сам сообщит, когда элемент вошёл в область просмотра.

Когда вмешательство вредит

Перехват прокрутки (scroll hijacking) — когда сайт сам решает, на сколько сдвинуть экран по одному движению колеса, или превращает прокрутку в перелистывание слайдов, — раздражает и ломает привычные жесты. На тачпадах и с клавиатуры такие страницы часто ведут себя непредсказуемо. Плавную прокрутку тоже стоит отключать для тех, кто попросил систему уменьшить движение: для этого есть медиазапрос prefers-reduced-motion: reduce.