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

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

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kunukn/scroll-lock-body-2
• Owner: kunukn
• License: mit
• Created: 2021-05-07T11:24:20.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-17T19:41:51.000Z (about 4 years ago)
• Last Synced: 2024-04-14T10:16:04.894Z (about 1 year ago)
• Language: JavaScript
• Size: 169 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# scroll-lock-body-2

[![npm version](https://img.shields.io/npm/v/scroll-lock-body-2.svg?style=flat-square)](https://www.npmjs.com/package/scroll-lock-body-2)

[![npm downloads](https://img.shields.io/npm/dm/scroll-lock-body-2.svg?style=flat-square)](https://www.npmjs.com/package/scroll-lock-body-2)

[![License](https://badgen.net/github/license/kunukn/scroll-lock-body-2)](./LICENSE)

[![Library minified size](https://badgen.net/bundlephobia/min/scroll-lock-body-2)](https://bundlephobia.com/result?p=scroll-lock-body-2)

[![Library minified + gzipped size](https://badgen.net/bundlephobia/minzip/scroll-lock-body-2)](https://bundlephobia.com/result?p=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

| ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/chrome/chrome_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/safari-ios/safari-ios_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/firefox/firefox_48x48.png) |

| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |

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

```sh

yarn add scroll-lock-body-2

# For npm, use the command below.

npm install scroll-lock-body-2 --save

```

### Usage

```js

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.

```html

  // UMD module is exposed through the "scrollLockBody" global variable.

  console.log(scrollLockBody)

```

## Explore the dist files

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

## Documentation

[Documentation generated from source files by Typedoc](./docs/README.md).

## License

Released under [MIT License](./LICENSE).