Параметр preventScroll

Библиотека Focus-trap предназначена для управления фокусом внутри модальных окон, всплывающих панелей и других интерактивных областей. Она предотвращает уход фокуса за пределы контейнера, обеспечивая доступность и удобство взаимодействия с интерфейсом. Одним из ключевых параметров при инициализации фокус-трапа является preventScroll.

Назначение preventScroll

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

  • при открытии модальных окон с фиксированным позиционированием;
  • при использовании кастомных скроллбаров внутри контейнера;
  • при сохранении текущего положения страницы без смещения.

Установка preventScroll: true предотвращает автоматическую прокрутку при активации фокуса, позволяя полностью контролировать визуальную позицию элемента.

Синтаксис

import { createFocusTrap } from 'focus-trap';

const modal = document.getElementById('modal');

const focusTrap = createFocusTrap(modal, {
  initialFocus: '#inputField',
  escapeDeactivates: true,
  preventScroll: true
});

focusTrap.activate();

В этом примере:

  • initialFocus указывает на элемент, который получит фокус при активации трапа;
  • escapeDeactivates: true разрешает деактивацию трапа клавишей Esc;
  • preventScroll: true отключает автоматическую прокрутку браузера при установке фокуса.

Поведение при значении false (по умолчанию)

Если preventScroll не установлен или имеет значение false, фокусировка на элементе может вызвать:

  1. Вертикальную прокрутку страницы, если элемент находится вне видимой области;
  2. Всплывание неожиданного смещения контента при открытии модального окна;
  3. Нарушение UX на мобильных устройствах, где прокрутка может быть резкой или неконтролируемой.

Таким образом, стандартное поведение браузера может конфликтовать с дизайнерскими решениями интерфейса.

Использование с динамическим контентом

Для элементов, которые добавляются в DOM динамически (например, контент модального окна подгружается через AJAX), preventScroll гарантирует корректную установку фокуса без смещения страницы:

function openModal() {
  const modal = document.createElement('div');
  modal.id = 'dynamicModal';
  modal.innerHTML = '<input id="dynamicInput" type="text">';
  document.body.appendChild(modal);

  const trap = createFocusTrap(modal, {
    initialFocus: '#dynamicInput',
    preventScroll: true
  });

  trap.activate();
}

Даже если #dynamicInput находится за пределами видимой области при добавлении, страница останется неподвижной, а фокус будет установлен.

Совместимость с другими параметрами

preventScroll работает в связке с другими опциями Focus-trap:

  • initialFocus — предотвращает смещение при установке начального фокуса;
  • fallbackFocus — используется, если указанный элемент недоступен; предотвращает нежелательную прокрутку;
  • clickOutsideDeactivates — при деактивации трапа кликом вне контейнера, preventScroll не влияет на прокрутку, так как фокус может вернуться к предыдущему элементу документа.

Поддержка браузеров

Параметр preventScroll использует стандартный API DOM focus() с опцией { preventScroll: true }. Поддержка современных браузеров:

  • Chrome ≥ 63
  • Firefox ≥ 55
  • Safari ≥ 11
  • Edge ≥ 79

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

Практические рекомендации

  1. Для модальных окон с фиксированным позиционированием всегда включать preventScroll: true;
  2. Для страниц с длинным вертикальным контентом это предотвращает «скачки» при открытии всплывающих элементов;
  3. При использовании кастомных скроллов внутри контейнера также необходимо включать эту опцию;
  4. Не устанавливать preventScroll при необходимости автоматического прокручивания к элементу (например, при навигации по списку элементов).

Заключение по использованию

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

Оглавление