A set of possible solutions to try when a popup does not scroll properly, or the page scrolls but the popup does not.

Related article: How to Display Different Popup and Overlay Scroll Effects in Combination

Article Contents

Solution

1: Disable "Fixed Popup" Setting

To make sure your popup scrolls properly, you can first disable the Fixed Positioning setting. In the Popup Editor, go to Popup Settings > Display > Position. Uncheck the Fixed Positioning option.

If you're still seeing the issue, please continue reading.

Solution

2: Use Proper Popup Positioning

If your popup is taller than the browser height, and you have your Position Location Setting on Middle Center, then this could be causing your issue. You will especially notice this because the top of your popup will be cut off as seen here:

Looking at the scrollbar, we clearly can't scroll up anymore, but it looks like we're missing a huge part of the top of our popup. When a popup is too tall for a screen, or if there's a possibility it may be too tall for smaller screens, then you must set your Popup Position Location to Top Center.

Under Popup Settings > Display > Position, change the Location selection from Middle Center to Top Center.

Now it should look something like this, and we can scroll down to see the rest of the form as well:

Solution

3: Do Not Use iFrames

Using iFrames within your popups is not only a cumbersome solution, but it's not responsive and will give you headaches across multiple platforms and devices. If you're using iFrames in your popups, expect problems.

Unfortunately, when it comes to iFrames, there's nothing we can do on our end to make the situation better. That's just the nature of iFrames.

We recommend that you find a way to replace what you're trying to do without using iFrames. The good news is that it shouldn't be a problem to find a replacement solution, as most up-to-date plugins and sites don't use iFrames because of the inherent restrictions associated with them.

Solution

4: Your Theme Is Overwriting Our Styles

The scrolling issues could also be caused by your theme styles. If your theme styles are overwriting our styles, then you'll want to implement this CSS code into your site:

html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {

overflow: hidden!important;

}

Using this code will give the scrollbars the proper styling so that they work as intended.

View the original source CSS on GitHub.

Solution

5: Fix the Background and Enable Smooth Scrolling

If everything is great on desktops, and the issue occurs exclusively on mobile devices and tablets, use either of the following CSS examples in your theme stylesheet to address the issue.

Option 1

html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {

overflow: hidden;
position: fixed;
width: 100%;

} html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

}

View the original source CSS on GitHub.

If Option 1 causes the page to jump to the top of the screen when the popup is triggered, use Option 2 below.

Option 2

html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {

overflow: hidden;
position: fixed;
width: 100%;

} html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

}

View the original source CSS on GitHub.

Related article: Why Does My Page Jump to the Top When a Popup Is Triggered.

Solution

6: Disable the Popup Overlay

If all else fails, disabling the Popup Overlay will likely fix your issue. This is the last resort, as most people like having the Overlay as a part of their popup because of the aesthetics it adds.

To disable the overlay layer, go to Popup Settings > Display > Advanced. Click Disable Overlay. See the screen capture below.

How do you prevent the body from scrolling?

Disable body scroll using the 'overflow' property of CSS. We can use the overflow property to avoid scrolling on the HTML element. Whenever we set the 'hidden' value for the overflow property, it stops scrolling.

How to scrollTo top of page with JavaScript?

You might need to trigger scrolling with JavaScript, in which case here are some options:.

window. scrollTo().

document. documentElement. scrollTop().

window. scroll().

document. documentElement. scrollIntoView().

How do you destroy dialog in bootbox?

Pressing the ESC key or clicking close dismisses the dialog and invokes the callback as if the user had clicked the cancel button.

How do you scrollTo the top in JavaScript onclick?

To make the page jump on the top instantly can be done with the native JavaScript method, namely — window. scrollTo(x-coord, y-coord) . This property of the window interface scrolls to a particular set of coordinates in the document.