scroll-lock-body-2

scroll-lock-body-2

About

Minimal code to enable scroll lock on the body element.
This uses the approach from Bootstrap modal components where the body width is contained.

It has been tested on

• Phones (iOS, Android)
• Tablets (iPadOS, Android)
• Laptops (Mac, Windows)
• Modern browsers

It updates when the devices rotates and if the height changes on interaction.

Browser Support

60+	12+	60+

Alternate version with margin-top implementation

An alternate version with same API exists with some required CSS setup
https://github.com/kunukn/scroll-lock-body

Demo

Codesandbox React		View	Edit
Codesandbox Vue		View	Edit
Codepen VanillaJS		View	Edit
Codesandbox VanillaJS		View	Edit

Installation

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

yarn add scroll-lock-body-2

# For npm, use the command below.
npm install scroll-lock-body-2 --save

Usage

import {
  enableScrollLock,
  disableScrollLock,
  isScrollLockEnabled,
  getScrollbarWidth,
} from 'scroll-lock-body-2'

// 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

// Run this to get the width of the body scrollbar
getScrollbarWidth() // returns a number

Installation from CDN

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

<!-- For UNPKG use the code below. -->
<script src="https://unpkg.com/scroll-lock-body-2"></script>

<!-- For JSDelivr use the code below. -->
<script src="https://cdn.jsdelivr.net/npm/scroll-lock-body-2"></script>

<script>
  // UMD module is exposed through the "scrollLockBody" global variable.
  console.log(scrollLockBody)
</script>

Explore the dist files

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

Documentation

Documentation generated from source files by Typedoc.

License

Released under MIT License.