Stop scrolling in background

@antonybearpark – Sounds like you have the overlay disabled. That allows the document to scroll. Try enabling the overlay. As long as the popups content fits on the screen there will be no scroll bar that way.

Hope that helps. Please take a moment to click that it Works and to rate and review the plugin or support.

No, I have the overlay enabled, but the background continues to scroll.

@antonybearpark – Do you have a link I can look at?

Hello,

it’s the same here.
=> https://www.martinahaas.com/beispiel-seite/

The scrolling behaviour on desktop is quite ok, but on ipad it’s really strange. When I swipe up and down sometimes the background is scrolling and sometimes the popup…

Thanks!

@formfarbefunktion: This is not your topic. If you require assistance then, as per the Forum Welcome, please post your own topic.

I cannot provide a link as the site isn’t available to public access yet.

Basically I have a long page of content, it requires some scrolling to get down to the bottom of the page, no matter what size screen you have.

There is a list of features for a product on the page, these are about a quarter down the page. Once you click on the a feature, one of your popups opens. These popups are quite small.

From the popup screen, you are able to scroll up and down revealing the content below (the page of features) whilst the popup with the overlay, sits on top.

What we’d like is the popup and content behind to disable scrolling, so no matter how much you try to scroll you return back to where you were before you opened the popup. We’d like the functionality to work similar to Skype’s feature page: https://www.skype.com/en/features/ but our popup’s overlay is transparent.

@antonybearpark – Sounds exactly like how it should work unless non default settings are enabled. The only popup settings which effect scrolling are: Fixed Position & Disable Overlay. Depending on how you set those settings depends on what CSS scroll functionality is applied.

By default if they are both off (Overlay Enabled), then the popup should work exactly like you want, when you close it you should be exactly where you left off.

Sounds like either CSS is not working as expected due to an outside rule causing unwanted effects or possibly a JS error. Last thing it could possibly by is that your footer.php file of your theme is calling <?php wp_footer(); ?> in the wrong place causing the popups to render inside another div (bad for scrolling). To fix that move wp_footer() to just before the </body>.

Hope that helps. Without a link to look at its hard to know exactly what is causing it.

Here is what happens:
1 = Checking this will disable and hide the overlay for this popup
2 = Checking this sets the positioning of the popup to fixed.

1 unticked and 2 unticked: Popup appears in middle of screen, transparent black overlay, page scrolls behind fixed popup
1 ticked and 2 unticked: Popup appears in middle of screen, no overlay, popup scrolls with page
1 unticked and 2 ticked: Popup appears in middle of screen, transparent black overlay, page scrolls behind fixed popup
1 ticked and 2 ticked: Popup appears in middle of screen, no overlay, page scrolls behind fixed popup

Desired: Popup appears in middle of screen, transparent black overlay, page doesn’t scroll behind fixed popup

@antonybearpark – Very very strange. That is not typical. I will do a screencast tomorrow to show what it should do and debug while I am at it, though this is the only report of it not working as expected.

Can you check your browsers console for any JS errors on the page? Also can you check the css being applied to your html & body elements using the browsers Inspector tool? See if their is an !important rule being applied to either in reguards to the overflow.

If there is a rule like that it could be overriding our scroll functionality (we hide the scroll bar of the html element when popups open unless the overlay is hidden).

Our theme is a child theme of Divi also using Divi Builder plugin.

I have checked the css, and cannot find any instances of overflow having an !important tag, nor do I see any errors in the JS console. If the page has popups, how should the page’s overflow be set at?

I could email you a link if you’d like, our site isn’t live yet so we don’t want public access yet

Hi all,

Had the scrolling issue on mobile devices. Turns out this was an easy fix!
Just add this code to fix the background and enable smooth scrolling of popup.

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;
}

• This reply was modified 8 years, 1 month ago by Duncan Michael-MacGregor.

Hi @duckonwater, I have this problem. Where do you insert the code you have specified??

TIA ??

• This reply was modified 7 years, 9 months ago by rogruz.

@rogruz

It’s CSS so it can go in your styles.css or use a plugin like Simple Custom CSS Javascript.

FYI, never a good idea to post in a thread this old (at least without “@” tagging a Author/Contributor). They don’t bump on the WP Support Forums any longer, and it’s simple happenstance I’m even here right now replying (creating a doc in our documentation regarding this issue).

Highly recommend just creating a new thread next time to get a response within 24 hours.

Going to mark this thread resolved while I’m here.

• This reply was modified 7 years, 9 months ago by waltmesser.
• This reply was modified 7 years, 9 months ago by waltmesser.
• This reply was modified 7 years, 9 months ago by bdbrown.