scroll-lock-body


About

Minimal JS library which supports scroll lock on the body and remembers the scroll position.

This version uses margin-top approach to remember the scroll-position.

Alternate version with simpler implementation

An alternate version with same API exists where there are no required CSS

https://github.com/kunukn/scroll-lock-body-2

CSS required

:warning: ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

``html

`

Demo



















Codepen VanillaJS	View	Edit
Codesandbox VanillaJS	View	Edit
Codesandbox VueJS	View	Edit

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

`sh
npm install scroll-lock-body --save

For Yarn, use the command below.


yarn add scroll-lock-body
`

$3

`js
import {
enableScrollLock,
disableScrollLock,
isScrollLockEnabled,
} from 'scroll-lock-body';

// Run this to lock the body scroll
enableScrollLock();

// Run this to unlock the body scroll
disableScrollLock();

// Run this to get the lock state
isScrollLockEnabled(); // returns true or false
`

$3

This module has an UMD bundle available through JSDelivr and Unpkg CDNs.

`html







`

Explore the dist files

https://unpkg.com/scroll-lock-body/

Documentation

Documentation generated from source files by Typedoc.

:warning: ️avoid having direct children in body which has position sticky.
e.g.

`html

``

License

Released under MIT License.