Stop Scrolling of background while a popup is open

We can disable scrolling of background when a pop up is open using some js and css tricks.Just add a class to body of page and set height of body to 100% and overflow hidden and position fixed using the class.

Add following code in css

     .stop-scrolling {
          height: 100%;
          overflow: hidden;
          position:fixed;
 }

In javascript,add/remove class to body as per our requirement.

To disable scrolling,call disableScrolling()

To enable scrolling,call enableScrolling().

function disableScrolling() {		
		var body = document.querySelector('body');
		body.classList.add('stop-scrolling');
    }
    function enableScrolling() {
	   var body = document.querySelector('body');
       body.classList.remove('stop-scrolling');
    }

Leave a comment

Your email address will not be published. Required fields are marked *