Як заблокувати прокручування фону в Popup Elementor

Чому потрібно блокувати фон під Popup

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 та відновлення позиції сторінки.