Disable body scrolling in overlay view

Question

I use this script to show and hide the modal view, but I want to disable scrolling on the body when the modal view opens and disconnects when it is closed.

I tried changing the JS code, but it works, but it interrupts the opening animation. the code is changed here:

(function() { var triggerBttn = document.getElementById( 'trigger-overlay' ), overlay = document.querySelector( 'div.overlay' ), bodyTag = document.querySelector( 'body' ), closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onEndTransitionFn = function( ev ) { if( support.transitions ) { if( ev.propertyName !== 'visibility' ) return; this.removeEventListener( transEndEventName, onEndTransitionFn ); } classie.remove( overlay, 'close' ); classie.remove( bodyTag, 'noscroll' ); }; if( support.transitions ) { overlay.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); classie.add( bodyTag, 'noscroll' ); } } triggerBttn.addEventListener( 'click', toggleOverlay ); closeBttn.addEventListener( 'click', toggleOverlay );})(); 

Original demo: jsfiddle

Answer 1

Add jquery first. Download from https://jquery.com and add it to your document using <script src="jquery.min.js"></script> .

Then at the bottom of the document (your document with your animation) add the following snapshot:

 <script> $(document).ready(function() { $('#trigger-overlay').click(function() { $('html').css('overflow', 'hidden'); $('body').bind('touchmove', function(e) { e.preventDefault() }); }); $('.overlay-close').click(function() { $('html').css('overflow', 'scroll'); $('body').unbind('touchmove'); }); }); </script> 

I tried this with the code https://github.com/codrops/FullscreenOverlayStyles and the Huge inc animation. This will prevent the text from scrolling when opening the animation.

Updated my answer , the first answer allowed me to scroll through the touch devices.

Answer 2

already discussed here: Disable BODY scrolling when opening a modal

uses bootstrap, but the same solution may work. the second answer is slightly better than accepted. he suggests switching the class to the body, which creates the body overflow: hidden; when the modal function is open.