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

scroll-lock

scroll-lock is a pure JavaScript plug-in used to lock the scrolling behavior of a web page. Typical use cases for this plugin are to keep the main content position constant when a long window is active.

Supports both desktop and mobile devices.

New features

  • The most advanced touch event processing algorithm
  • Support horizontal scrolling
  • Support for nested scrollable items
  • Textarea support for nested and editable content
  • New API

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

Official Website(FL3NKEY): Click Here

This superior jQuery/javascript plugin is developed by FL3NKEY. For extra Advanced Usages, please go to the official website.