Prevent Backgroud Scrolling When Popup Is Open - scrollable-overlay

Prevent Backgroud Scrolling When Popup Is Open - scrollable-overlay
File Size: 4.11 KB
Views Total: 3593
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

scrollable-overlay is a jQuery plugin that prevents body (background content actually) from scrolling when a modal popup is open, while keeping the popup content scrollable.

Supports both desktop and mobile devices (iOS and Android).

How to use it:

1. Include the main JavaScript file index.js after jQuery JavaScript library.

<script src="" 
<script src="index.js"></script>

2. Create a button to toggle your modal window.

<button id="btn">OPEN MODAL</button>
<div id="overlay" class="overlay hidden">
  <div id="close">CLOSE</div>
  Modal Content here

3. Activate the modal window and disable body scrolling when the modal window is open.

const button = $('#btn')
const overlay = $('#overlay')

const close = $('#close')
const body = $('body')
button.on('click', () => {

close.on('click', () => {

This awesome jQuery plugin is developed by ulivz. For more Advanced Usages, please check the demo page or visit the official website.