Lock Scrolling Of A Web Page – scroll-lock

Category: Javascript | June 11, 2019
Author: FL3NKEY
Views Total: 2,083
Official Page: Go to website
Last Update: June 11, 2019
License: MIT

Preview:

Lock Scrolling Of A Web Page – scroll-lock

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

Enable the page scrolling.

scrollLock.enablePageScroll();

Specify which element needs to fill in the space.

addFillGapTarget(element);

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.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+

You Might Be Interested In:


Leave a Reply