Почему ошибка выглядит безобидной

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

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

Оверлей — ещё не блокировка

Высокий слой и большое значение z-index отвечают только за то, что находится сверху. Они не меняют поведение документа снизу. Даже запрет событий мыши для фона не решает весь сценарий: остаются прокрутка документа, клавиатурный фокус, системный выход за границу страницы и восстановление позиции после закрытия.

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

  • Слой закрывает экран визуально.
  • Scroll-lock останавливает документ под ним.
  • Модальный режим отделяет активную навигацию от фонового содержания.
  • Восстановление возвращает интерфейс без скачка и потерянного места.

Сначала сохранить место, потом заморозить страницу

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

Одновременно блокируются overscroll и жесты фонового документа. Само меню при необходимости может прокручивать собственное содержимое, но этот жест не должен продолжаться на странице за его границами. После закрытия все временные стили снимаются, и сохранённая координата возвращается явно. Важна вся последовательность; один overflow без памяти о позиции — лишь половина решения.

Палец остановили — теперь не потерять клавиатуру

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

Это нужно не только пользователю клавиатуры или экранного диктора. Фокус — часть состояния интерфейса. Без него браузер может продолжить взаимодействовать с фоном, а после закрытия человеку придётся заново искать точку управления. Правильное меню помнит не только пиксель, но и действие, к которому нужно вернуться.

Проверять нужно поведение, а не один красивый скриншот

Снимок открытого меню способен подтвердить только внешний вид. Наша браузерная проверка сначала прокручивает страницу, запоминает координату, открывает меню и сравнивает его прямоугольник с текущей видимой областью. Затем колесо пытается сдвинуть документ. Тест подтверждает, что фон остаётся на сохранённом месте, а после Escape восстанавливаются диалог, атрибут блокировки, координата и фокус кнопки.

Сценарий запускается в мобильной геометрии 390 × 844 и на планшете 768 × 1024. Отдельная проверка включает системное предпочтение уменьшенной анимации: переходы исчезают, но логика открытия, закрытия и блокировки сохраняется. Так мы проверяем не фотографию интерфейса, а его жизненный цикл.

  • Меню начинается в координате 0 × 0 и равно текущему viewport.
  • Кнопка закрытия остаётся внутри видимой области.
  • Попытка прокрутки не меняет положение фоновой страницы.
  • Escape закрывает диалог и возвращает прежнюю позицию и фокус.

Чего этот тест пока не доказывает

Автоматическая проверка в Chromium подтверждает конкретную реализацию на двух геометриях, но не заменяет просмотр на всех сочетаниях устройства, браузера и вспомогательной технологии. Мобильные Safari и Яндекс Браузер, виртуальная клавиатура, изменение ориентации и safe area способны добавить собственные условия. После изменения шапки или состава меню реальная проверка нужна снова.

Scroll-lock также не делает навигацию доступной сам по себе. Нужны понятное имя кнопки, корректное состояние «открыто», семантика диалога, управляемый фокус, закрытие по Escape и отсутствие интерактивного фона. И даже идеально работающая механика не доказывает рост конверсии: она доказывает более узкое и честное свойство — интерфейс не теряет место и управление пользователя.