🛑 Блокировка прокрутки под модальным окном — обязательна

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

10 причин блокировать прокрутку под модальным окном

Сохранение позиции. Пользователь возвращается ровно туда, где открыл модалку, без прыжков по странице.
Фокус на содержимом. Отсутствие движущегося фона помогает сосредоточиться на действии внутри модалки.
Отсутствие «галлюцинаций». Скролл под прозрачными слоями создаёт ощущение, будто модалка «плавает» и висит криво.
Стабильные жесты на мобайле. Блокировка предотвращает случайное прокручивание подложки при свайпе внутри модального контента.
Корректные фокусы клавиатуры. Когда фон зафиксирован, Tab не уходит в невидимые элементы за модалкой.
Лучшая доступность. Пользователи со скринридерами и клавиатурой не теряют фокус и понимают, что находятся в диалоге.
Единый сценарий аналитики. Нет ложных событий «скролл» в момент, когда пользователь на самом деле работает с модалкой.
Предсказуемость переходов. После подтверждения действия человек видит тот же контент, а не случайный блок ниже.
Экономия ресурсов. Фиксированный фон избавляет от лишних перерисовок, особенно в тяжёлых списках или лентах.
Профессиональный вид продукта. Интуитивное поведение модалок формирует ощущение качества и заботы.

Как реализовать блокировку

Добавляйте класс на body при открытии модалки (overflow: hidden;), не забывайте возвращать состояние.
Для мобайла используйте подход с фиксацией позиции (position: fixed; top: -scrollY;) и восстановлением скролла после закрытия.
Применяйте готовые хелперы (body-scroll-lock, react-remove-scroll), чтобы не ловить edge-case с тач-жестами.
Покрывайте сценарий автотестами: открыл модалку → зафиксировал позицию → закрыл → остался на месте.

Итог

Блокировка прокрутки — не мелочь, а норма UX-гигиены. Она сохраняет контекст пользователя, разгружает поддержку и поднимает доверие к продукту. Если в проекте ещё есть модалки без фиксации фона, исправьте их сегодня — пользователи заметят.