jQuery/CSS: fixed overlay should not allow scrolling of background?

Question

i have a overlay box that is fixed and centered on the screen. The page itself is rather long and has a vertical scrollbar.

I'd like to disable scrolling of the page itself once the overlay is shown. However I can't disable scroll completely because some overlays do have overflow-y:scroll for themselves. So the content in the overlay should be scrolled but the page itself should be stuck.

Any idea how to solve that with jquery or css?

Answer 1

The quickest and dirtiest way I can think of is to attach an event listener to the window for scroll events, and preventDefault() if your overlay is visible.

like so (using jquery).

   window.addEventListener('scroll', function(e){
        var el = $('.overlay.active');

        if( el.length > 0 ){
            e.preventDefault();
        }   
   });

Hope this is what your looking for.