# tua-body-scroll-lock
English | [简体中文](./README-zh_CN.md)
## Introduction
`tua-body-scroll-lock` enables body scroll locking for everything.
-
-
- Open in codesandbox
- Open in jsfiddle
- Open in jsbin
## Install
### Node Package Manager(recommended)
```bash
pnpm i tua-body-scroll-lock
```
### CDN
UMD(`tua-bsl.umd.js`)
```html
```
Minified UMD(`tua-bsl.umd.min.js`)
```html
```
ESM in browser(`tua-bsl.esm.browser.js`)
```html
```
Minified ESM in browser(`tua-bsl.esm.browser.min.js`)
```html
```
## Usage
### Normal
```js
import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()
```
### Options
#### setOverflowForIOS: boolean (iOS lock only)
Version: `1.6.0+`
Optional, default: `false`
Used to prevent mouse scroll events in iOS simulator.
#### overflowType: 'hidden' | 'clip'
optional, default: 'hidden'
`clip` is suitable for adapting elements of `position: sticky` in high-version browsers (Chrome 90 +).
> https://caniuse.com/mdn-css_types_overflow_clip
```js
import { lock } from 'tua-body-scroll-lock'
lock(targetElement, { overflowType: 'clip' })
```
#### useGlobalLockState: boolean
optional, default: false
Whether to use global `lockState` for every BSL. It's useful when your page have multiple BSL instances.
### TargetElement needs scrolling (iOS only)
In some scenarios, when scrolling is prohibited, some elements still need to scroll, at this point, pass the targetElement.
```js
import { lock, unlock } from 'tua-body-scroll-lock'
const elementOne = document.querySelector('#elementOne')
const elementTwo = document.querySelector('#elementTwo')
// one targetElement
const targetElement = elementOne
// multiple targetElements
const targetElements = [elementOne, elementTwo]
lock(targetElement)
lock(targetElements)
unlock(targetElement)
unlock(targetElements)
```
> The `targetElement` is not required on the PC and Android.
### clearBodyLocks
In the SPA, if you called `lock`, but forgot to call `unlock` before jumping to other pages, that is too bad. Because the operation of the page is not restored, such as forbid `touchmove`, `clearBodyLocks` is used to clear all side effects. Sure, you can also call `unlock`, but if you have called `lock` multiple times, you must call `unlock` multiple times, which is very unfriendly.
## Examples
Please see these examples:
- [vue](./examples/vue/)
- [react](./examples/react/)
- [vanilla](./examples/vanilla/)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
> inspired by [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)
