Lock Scrolling Of A Web Page – scroll-lock

Preview:

Description:

scroll-lock is a pure JavaScript plugin used to lock the scrolling behavior of a webpage.

Typical use cases for this plugin is to keep the main content position fixed when a long modal window is active.

Supports both desktop and mobile devices.

How to use it:

Download & install 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 directly load the JavaScript file in the document.

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

Disable the page scrolling.

scrollLock.disablePageScroll(element);

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

Enable the page scrolling.

scrollLock.enablePageScroll();

Specify which element needs to fill in space.

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

scrollLock.toggle();

More useful API methods.

// 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();

Changelog:

v2.1.5 (02/09/2021)

• Add cancelable condition

v2.1.4 (04/21/2020)

• Use attribute instead of dataset

v2.1.2 (06/11/2019)

• Add support for <input type=”range”> in scrollable containers

v2.1.1 (05/10/2019)

• fix(universal): fix angular universal errors

v2.1.0 (03/02/2019)

• More advanced touch event handling algorithm
• Horizontal scrolling support
• Support for nested scrollable elements
• Support for nested textarea and contenteditable
• New API

10/06/2018

• fix touchmove preventdefault ios 11.3+