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> |
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.
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.