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

the page i'm working displays modal layover div (position: fixed) > div (position: relative; width/height: 100%) > div (position: absolute; left/right: 50%).

both on mobile devices , on chrome/safari on desktop, swiping still scrolls page behind layover. can prevent javascript or css, and, if so, how?

at least on desktop browsers, there 2 events related scrolling: scroll , mousewheel. former occurs when element scrolled, cannot prevented.

what you're looking catch mousewheel event on overlay , prevent default action. can javascript , jquery so:

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

this won't work in ie , firefox, however. browser compatibility details, see this page.

there appears no consistent way of doing on mobile browsers, nor scrolling via touchpad on os x.