I am currently facing an issue with disabling scrolling on a webpage when a user opens a popup, while still allowing them to scroll within the popup itself.
The popup element is defined by the following attributes:
#popup {
display: none;
width: 100%;
height: 100%;
z-index: 10;
position: fixed;
background-color: #3F3F3F;
overflow: auto;
left: 0;
top: 0;
}
When a user opens the popup, the following code is executed:
$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');
While this solution works perfectly on desktop browsers, it unfortunately does not work on mobile devices. On mobile, users can still scroll (albeit at a slower speed).
How can I also disable scrolling on mobile browsers?
Thank you in advance for your assistance.