A Cross-Browser JavaScript Library to Disable Page Scrolling | scroll-lock

How to make use of it:

Download & set up the scroll-lock.

# NPM
$ npm install scroll-lock --save

Import the scroll-lock.

// ES 6
import scrollLock from 'scroll-lock';

// CommonJS:
const scrollLock = require('scroll-lock');

Or immediately load the JavaScript file within the doc.

<script src="scroll-lock.js"></script>

Disable the web page scrolling.

scrollLock.disablePageScroll(element);

<!-- OR VIA DATA ATTRIBUTE -->
<div class="my-scrollable-element" data-scroll-lock-scrollable></div>

Enable the web page scrolling.

scrollLock.enablePageScroll();

Specify which factor must fill in the area.

addFillGapTarget(element);

<!-- OR VIA DATA ATTRIBUTE -->
<div class="my-fill-gap-element" data-scroll-lock-fill-gap></div>

Clears the queue value.

clearQueueScrollLocks();

Toggle the web page scrolling.

scrollLock.toggle();

More helpful API strategies.

// Get state of scrollbar.
getScrollState(); 

// Get width of scrollbar.
getPageScrollBarWidth();

// Get current width of scrollbar.
getCurrentPageScrollBarWidth();

// Add/remove scrollable elements
addScrollableSelector('.element');
removeScrollableSelector('.element');
addScrollableTarget(element);
removeScrollableTarget(element);

// Add/remove lockable elements
addLockableSelector('.my-lockable-selector');
addLockableTarget(element);

// Add/remove fill gap
addFillGapSelector('.element');
removeFillGapSelector('.element');
addScrollableTarget(element);
removeFillGapTarget(element);

// Set the method of filling the gap
setFillGapMethod('margin');

// Recalculates filled gaps
refillGaps();

Lock Scrolling Of A Web Page, scroll-lock Plugin/Github

See Demo And Download