Как заблокировать прокрутку фона в Popup Elementor

Зачем блокировать фон под Popup

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

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

Блокировка фона уместна для форм обратной связи, меню, уведомлений, галерей, корзины и других Popup, которые должны оставаться в фокусе до закрытия.

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

Как включить Prevent Scrolling в Elementor

Настройку нужно изменять в шаблоне самого Popup, а не в отдельной кнопке, которая его открывает. Названия пунктов могут немного отличаться в зависимости от версии Elementor или языка интерфейса, поэтому ориентируйтесь на параметр Prevent Scrolling.

Откройте нужный шаблон Popup в редакторе Elementor и перейдите к его настройкам. Затем откройте раздел Advanced и включите Prevent Scrolling. Сохраните изменения и опубликуйте или обновите шаблон.

После этого Elementor должен блокировать прокрутку основной страницы, пока Popup открыт. Проверяйте результат не только в режиме конструктора, но и на реальной странице или в режиме предварительного просмотра с учетом условий показа.

• откройте шаблон Popup;
• перейдите к настройкам Popup;
• найдите раздел Advanced;
• включите Prevent Scrolling;
• сохраните изменения и проверьте Popup на мобильном устройстве.

Как настроить прокрутку внутри Popup

Блокировка фона не означает, что длинный Popup автоматически станет удобным для прокрутки. Если его высота превышает высоту экрана, содержимое может обрезаться или выходить за пределы видимой области.

Для длинных форм, меню и информационных окон создайте внутренний контейнер, который занимает доступную высоту и прокручивается отдельно от body. Обычно для него задают ограничение высоты и вертикальный overflow.

CSS лучше применять к конкретному контейнеру Popup через собственный класс, а не ко всему body. Например, добавьте контейнеру класс popup-scroll и используйте следующие стили:

• внутренний скролл должен быть заметным и доступным для свайпа;
• кнопку закрытия лучше оставить видимой или разместить в предсказуемой области;
• не ограничивайте высоту каждого внутреннего элемента без необходимости, чтобы не создавать несколько независимых полос прокрутки.

.popup-scroll {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

Что проверить после настройки

После включения Prevent Scrolling протестируйте Popup на узком экране и на устройстве с сенсорным управлением. Эмуляция в браузере полезна, но не всегда воспроизводит поведение мобильного Safari или Android-браузера.

Откройте Popup из разных мест страницы, прокрутите его содержимое, закройте и откройте снова. Это поможет выявить проблемы со стилями, фокусом и восстановлением положения документа.

• Фон не движется при свайпе по пустой области Popup.
• Длинное содержимое внутри Popup можно прокрутить до конца.
• Горизонтальная полоса прокрутки не появляется.
• После закрытия страница возвращается к ожидаемому положению.
• Popup не выходит за пределы экрана в портретной и альбомной ориентации.
• Кнопки, поля формы и крестик закрытия остаются доступными.
• На Android кнопка «Назад» работает корректно, если она используется для закрытия модального окна.

Типичные проблемы и их причины

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

Горизонтальный скролл обычно возникает из-за элемента, ширина которого превышает viewport. Причиной могут быть отрицательные отступы, фиксированная ширина, трансформация или изображение без ограничения максимальной ширины.

Если после закрытия страница возвращается не на то место, не спешите добавлять глобальный overflow: hidden для body. Скрипты, которые вручную блокируют body, могут изменять его ширину, положение или способ восстановления прокрутки.

Несколько вложенных контейнеров с overflow-y: auto также могут ухудшить UX: свайп начинает работать непредсказуемо, а пользователь не понимает, какая именно область прокручивается.

• не добавляйте overflow: hidden к body без явной необходимости;
• не блокируйте одновременно body, html и несколько родительских контейнеров;
• проверьте, не перекрывает ли невидимый элемент область свайпа;
• после изменений очищайте кэш CSS Elementor, кэш плагина и кэш браузера, если они используются.

Особенности iOS и Android

Мобильные браузеры по-разному обрабатывают высоту viewport, инерционную прокрутку и жесты. В некоторых ситуациях значение 100vh может учитывать область, занятую адресной строкой или системными панелями, поэтому Popup иногда выглядит немного выше доступного экрана.

На iPhone дополнительно проверьте, не перекрывает ли нижняя системная область кнопки формы. Для важных элементов могут потребоваться внутренние отступы, а высоту Popup лучше оценивать на реальном устройстве.

На Android протестируйте кнопку «Назад»: в зависимости от логики Popup она может закрывать модальное окно или возвращать пользователя на предыдущую страницу. Важно, чтобы открытый Popup не создавал неожиданную навигацию.

• проверьте портретную и альбомную ориентацию;
• протестируйте несколько размеров экрана;
• оцените работу клавиатуры после фокусировки на поле формы;
• убедитесь, что нижние кнопки не скрываются за системной панелью.

Когда лучше не блокировать прокрутку страницы

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

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

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

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

Быстрый алгоритм диагностики

Если проблема не исчезает, проверяйте ее последовательно. Сначала убедитесь, что Prevent Scrolling включен в правильном шаблоне. Затем временно отключите сторонние стили и скрипты, чтобы определить, не конфликтуют ли с Elementor тема или другой плагин.

Далее проверьте структуру Popup: один основной контейнер для контента, предсказуемая максимальная высота и только одна необходимая область вертикальной прокрутки. После каждого изменения тестируйте открытие, прокрутку и закрытие.

Если ошибка проявляется только на одном устройстве или в одном браузере, сравните ее с чистым тестовым Popup. Это поможет отделить проблему блокировки фона от проблемы конкретного виджета, формы или скрипта.

• проверьте настройки именно активного Popup;
• очистите кэш и обновите стили;
• найдите элемент, создающий горизонтальный overflow;
• оставьте одну основную область внутреннего скролла;
• проверьте закрытие Popup и восстановление положения страницы.