Получить профессию в SkyproОтключение прокрутки BODY при открытии модала в Bootstrap
Быстрый ответ
Желая запретить прокрутку страницы во время показа модального окна, можно добавить стиль overflow: hidden; к элементу <body>. Переключение этой функции можно осуществить с помощью следующего кода:
function toggleBodyScroll(lock) {
document.body.style.overflow = lock ? 'hidden' : '';
}
// Время блокировать прокрутку – открыто модальное окно
toggleBodyScroll(true);
// При закрытии модального окна наоборот разрешаем прокрутку
toggleBodyScroll(false);Вызывая функцию toggleBodyScroll с аргументом true или false можно управлять возможностью прокрутки для элемента body.
Применение в разных ситуациях
Управление позицией прокрутки
При наличии у элемента body.modal-open свойства position: fixed;, страница может внезапно сдвинуться в начало. Для предотвращения этого добавьте overflow-x: hidden; к элементу body.
Учет ширины скроллбара
При скрытии полосы прокрутки посредством переключения overflow ширина контента body может измениться. Чтобы предотвратить это, посчитайте ширину полосы прокрутки и скорректируйте padding элемента body во время открытия модального окна.
Адаптация для мобильных устройств
Учтите, что многие пользователи работают с тачскринами мобильных устройств – используйте свойство touch-action: none;, чтобы запретить прокрутку, когда открыто модальное окно. Проведите тестирование на разных устройствах, чтобы обеспечить корректное отображение.
Дополнительные инструменты
Использование класса для body
Добавление класса modal-open к body во время показа модального окна через JavaScript дает возможность для применения дополнительных стилей и поведений, связанных со состоянием модального окна:
function openModal() {
document.body.classList.add('modal-open');
toggleBodyScroll(true);
}
function closeModal() {
document.body.classList.remove('modal-open');
toggleBodyScroll(false);
}Использование jQuery
С jQuery стиль можно переключить проще, используя метод .css():
$('body').css('overflow', lock ? 'hidden' : 'auto');Использование плагинов
Воспользовавшись плагинами jQuery или других библиотек, вы получите дополнительные функции для управления прокруткой и модальными окнами.
Поддержка старых браузеров
Браузеры старых версий, например IE7 и выше, могут потребовать специальных техник и полифиллов.
Визуализация
Можно представить прокрутку страницы как речку, а модальное окно — как плотину:
Речка: [🍃🌊🍃🌊🍃]При активации модального окна плотина устанавливается:
Плотина: [🛑🚧🛑]Когда модальное окно открыто:
Речка + плотина: [🍃🌊🛑🚧🛑]После убирания плотины речка возвращается в исходное состояние:
Речка: [🍃🌊🍃🌊🍃]Закрываем прокрутку (речка), вводя модальное окно (плотину), и возвращаем, когда закрывается окно.
Акцент на доступности
Навигация с помощью клавиатуры
Для пользователей, использующих клавиатуру, важно обеспечить удобное использование. Позвольте закрыть модальное окно клавишей Escape, не вызывая при этом прокрутки страницы.
Поддержка вспомогательных технологий
Сделайте ваши модальные окна совместимыми с программами для чтения с экрана и другими вспомогательными инструментами, используя соответствующие роли и атрибуты ARIA.
Учет влияния на поток документа
Учитывайте влияние стилей на производительность. Используйте CSS-свойства, минимально влияющие на поток, чтобы уменьшить время на перерисовку и переформатирование документов.
Полезные материалы
- Prevent Page Scrolling When a Modal is Open | CSS-Tricks – Стратегии и техники для остановки прокрутки страницы во время показа модального окна.
- touch-action – CSS: Cascading Style Sheets | MDN – Документация по CSS-свойству для управления сенсорными событиями и событиями указателя.
- How To Make a Modal Box With CSS and JavaScript – Подробное руководство по созданию модального окна с учетом наложения и прокрутки.
- overflow | Codrops – Обзор CSS-свойства overflow.
- Introduction | a11y-dialog – Рекомендации по созданию доступных модальных окон, совместимых со вспомогательными технологиями.
- KeyboardEvent – Web APIs | MDN – Информация об интерфейсе KeyboardEvent для реализации управления клавиатурными взаимодействиями.