Stop Background Page Scrolling with Popups

Does anybody know the best way to stop the background page from scrolling when a popup is opened?  Whenever my popup requires scrolling within it, its very easy to also scroll the background page and move the popup window.  Ideally I would like to lock the popup in the centre of the screen and only scroll within the active window.

Thanks

Dan

Solution

Hey Daniel,

Easy fix, throw this inside your application

.os-internal-Popup {
    position:fixed;   
}


Shawn Hall wrote:

Hey Daniel,

Easy fix, throw this inside your application

.os-internal-Popup {
    position:fixed;   
}



it didn't work

Daryl wrote:

Shawn Hall wrote:

Hey Daniel,

Easy fix, throw this inside your application

.os-internal-Popup {
    position:fixed;   
}



it didn't work


Please try using JavaScript, see below example

Deactivation scroll:
var topHeader = document.getElementById('b1-header');
topHeader.nextElementSibling.style.overflowY="hidden";


Activation scroll:
var topHeader = document.getElementById('b1-header');
topHeader.nextElementSibling.style.overflowY="auto";


I am using the same on action call and its working for me.

mvp_badge
MVP

Hi Daniel,

What you want is unfortunately not possible. The pop-up is part of the parent's screen window, and scrolls along with it.

Solution

Hey Daniel,

Easy fix, throw this inside your application

.os-internal-Popup {
    position:fixed;   
}


Shawn Hall wrote:

Hey Daniel,

Easy fix, throw this inside your application

.os-internal-Popup {
    position:fixed;   
}



it didn't work

Daryl wrote:

Shawn Hall wrote:

Hey Daniel,

Easy fix, throw this inside your application

.os-internal-Popup {
    position:fixed;   
}



it didn't work


Please try using JavaScript, see below example

Deactivation scroll:
var topHeader = document.getElementById('b1-header');
topHeader.nextElementSibling.style.overflowY="hidden";


Activation scroll:
var topHeader = document.getElementById('b1-header');
topHeader.nextElementSibling.style.overflowY="auto";


I am using the same on action call and its working for me.

I'm facing same issue for iPhone 5s and iPhone 6. When I open the pop up then background screen also scrolling with pop up.

Hi,


I am facing a similar issue in the Reactive web application.


I have a table on the web screen all the way down and each record has a link to open up a popup, when I click on a link to open a popup then it scrolls to the top of the page.


How can we stop this?


Regards,

Vinod

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.