How to Disable Background Scrolling When Popup Modal Is Open

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>

<button id="btn">OPEN POPUP</button>
<div id="overlay" class="overlay hidden">
  <div id="close">CLOSE</div>
  POPUP CONTENT GOES HERE
</div>

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')
})