@js4y/lock-scroll NPM

Lock scroll

A set of methods to lock scrolling within an element or an entire page on mobile devices, tablets and desktops.

Live Demo: https://bukacekd.github.io/lock-scroll

Features

easy to use
compatible with Android, IOS, MacOS and Windows
compatible with mobile devices, tablets and desktops
preserves the space corresponding to the width of the scrollbar

Installation

Npm

npm install @js4y/lock-scroll

CDN

<script src="https://unpkg.com/@js4y/lock-scroll/dist/index.js"></script>

Usage

Npm

import {lockScroll, unlockScroll} from '@js4y/lock-scroll';

// lock scrolling
lockScroll();
// unlock scrolling
unlockScroll();

CDN

<script src="https://unpkg.com/@js4y/lock-scroll/dist/index.js"></script>

<script>
    // lock scrolling
    js4y.scrolling.lockScroll();
    // unlock scrolling
    js4y.scrolling.unlockScroll();
<script>

Methods

lockScroll(target?: HTMLElement): void

Lock scrolling within an element or an entire page.

// lock page scrolling
lockScroll();

// lock scrolling for specific element
lockScroll(document.getElementById('scrollable-element'));

unlockScroll(target?: HTMLElement): void

Unlock scrolling within an element or an entire page.

// unlock page scrolling
unlockScroll();

// unlock scrolling for specific element
unlockScroll(document.getElementById('scrollable-element'));

Browser support


Chrome 69+	Edge 79+	Firefox 41+	Opera 56+	Safari 12.1+

License

The project is licensed under MIT license.

CountUp - A tiny dependency-free JavaSript library for animating numeric values.
Dialog - A tiny dependency-free JavaSript ES6 library built on a dialog element with minimal configuration.
Loader - A tiny dependency-free javascript loading spinner component with minimal configuration.