How to Disable Background Scrolling When Popup Modal Is Open
Do you want to prevent background scrolling when popup modal is open then in this post I am going to share simple lightweight plugin which disable background scrolling when ever popup will display on page. scrollable-overlay is a jQuery plugin that prevents html body from scrolling when a modal popup is open, while keeping the popup content scrollable.
Libraries
Include plugins libraries on page with latest jQuery library.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="index.js"></script>
HTML
Added sample popup button with dummy content.
<button id="btn">OPEN POPUP</button> <div id="overlay" class="overlay hidden"> <div id="close">CLOSE</div> POPUP CONTENT GOES HERE </div>
JS
Activate the popup window and disable body scrolling when the popup modal window is open.
const button = $('#btn') const overlay = $('#overlay') overlay.scrollableOverlay() const close = $('#close') const body = $('body') button.on('click', () => { overlay.removeClass('hidden'); overlay.trigger('show') }) close.on('click', () => { overlay.addClass('hidden'); overlay.trigger('hide') })
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.