CODEWITHSUNDEEP
javascriptcssdomdom-events
Andrey Fedorov
Andrey Fedorov

Reputation: 9669

How do I stop scrolling of page when overlay div is visible?

The page I'm working with sometimes displays a modal layover with a div (position: fixed) > div (position: relative; width/height: 100%) > div (position: absolute; left/right: 50%).

Both on mobile devices and on Chrome/Safari on the desktop, swiping still scrolls the page behind the layover. Can I prevent this with JavaScript or CSS, and, if so, how?

Upvotes: 3

Views: 2037

Answers (2)

Ofer Segev
Ofer Segev

Reputation: 5282

this is true, but to also support mobile devices for web applications, use this:

document.ontouchstart = function(e){ 
    e.preventDefault();

}

Upvotes: 0

Piet van Dongen
Piet van Dongen

Reputation: 1639

At least on desktop browsers, there are two events related to scrolling: scroll and mousewheel. The former occurs when an element is scrolled, which cannot be prevented.

What you're looking to do is catch the mousewheel event on the overlay and prevent its default action. You can do that with JavaScript and jQuery like so:

$('#overlay').on('mousewheel', function(e) {
    e.preventDefault();
});

This won't work in IE and Firefox, however. For browser compatibility details, see this page.

There appears to be no consistent way of doing this on mobile browsers, nor with scrolling via the touchpad on OS X.

Upvotes: 3

Related Questions