How to disable page scrolling to the bottom on appearing popup effectively

Elementor is a robust website builder that provides multiple features to improve the user experience. A shared element utilized by web developers and designers is popups. Elementor’s popup creator enables users to design captivating popups with a range of triggers and configurations. However, Elementor has one main common problem : the page scrolls to the bottom or footer when the popup appears. This is especially crucial if you aim to direct the user’s attention exclusively on the popup content. In this guide, we’ll walk you through the steps to disable page scrolling to the bottom when a popup appears in Elementor. Additionally, we’ll discuss how to tackle potential issues with mobile view and accessible navigation settings.

Steps to Disable Background Page Scrolling to the Bottom or Footer When an Elementor Popup Appears

Open the Popup Template

Start by opening your popup template. Navigate to Templates in your WordPress dashboard, then choose Popups. Select the popup template you want to edit and click Edit with Elementor.

Access Popup Settings

Once your popup is open in Elementor’s editor, click on the gear icon at the bottom left corner of the editor screen. This will open the popup settings panel.

Go to the Advanced Tab

In the popup settings panel, click on the Advanced tab to unlock additional settings for the popup.

Disable Page Scrolling

Under the Advanced section, locate the Disable Page Scrolling option. Turn the toggle to Yes. This will prevent the page from scrolling when the popup is active.

Note: This feature may not work on mobile or desktop devices, or both, in certain scenarios. If you encounter this issue, additional steps are available to ensure the popup functions correctly on the required devices.

Disable Accessible Navigation

If the disable page scrolling option doesn’t seem to work on device either desktop or mobile devices, try disabling the Accessible Navigation setting. In the Advanced tab of the popup settings, turn off the toggle for Accessible Navigation. This ensures the user cannot interact with the page content behind the popup, further focusing their attention on the popup.

Purge Cache

If you are using a cache plugin , then after updating the popup settings, clear your site’s cache to ensure the popup scroll disable feature works as expected. Caching plugins can sometimes prevent recent changes from being displayed properly.

What to Do if Disabled Page Scrolling Doesn’t Work For desktop or mobile devices?

Sometimes, even after enabling the Disable Page Scrolling option, the feature may not work as intended on mobile devices. This can happen due to differences in how mobile browsers handle popups or certain settings in Elementor.

To resolve this, disable Accessible Navigation by turning off the toggle below the disable page scrolling option.

Other ways can include checking themes; they should not be outdated and plugins . Try disabling conflicting plugins and themes one by one to determine which is responsible for the issue not being resolved.

FAQS

Why doesn’t the disable page – scrolling option work on mobile or desktop devices?

The disable page scrolling setting may not work perfectly on mobile or desktop devices due to their different handling of pop-ups and your WordPress environment . If you experience issues, try disabling accessible navigation as well. Lastly, clear the cache to see the desired effect.

How to stop background page scrolling when a popup is opened?

To stop background scrolling when a popup opens in Elementor, go to the Advanced tab in the popup settings and enable Disable Page Scrolling. If it doesn’t work on desktop or mobile devices, disable Accessible Navigation if needed, and clear your site’s cache if you are using a caching plugin.