tua-body-scroll-lock

> inspired by body-scroll-lock

English | 简体中文

Introduction

tua-body-scroll-lock enables body scroll locking for everything.

$3

* Doesn't work on Android webview
* Doesn't work on PC with mouse wheel
* Doesn't work on iOS, if you touch somewhere instead of targetElement
* Must pass targetElement, even if it's not necessary

😱Can't believe it? Please try this demo with BSL yourself.

Install

$3

``bash
$ npm i -S tua-body-scroll-lock


OR


$ yarn add tua-body-scroll-lock
`

$3

* UMD(tua-bsl.umd.js)
* unpkg: https://unpkg.com/tua-body-scroll-lock
* jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock

example code

`html





`

* Minified UMD(tua-bsl.umd.min.js)
* unpkg: https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.min.js
* jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.min.js

example code

`html





`

* ESM in browser(tua-bsl.esm.browser.js)
* unpkg: https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js
* jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js

example code

`html





`

* Minified ESM in browser(tua-bsl.esm.browser.min.js)
* unpkg: https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js
* jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js

example code

`html





`

Usage

$3

`js
import { lock, unlock } from 'tua-body-scroll-lock'

lock()
unlock()
`

$3

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.

$3


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.
#### demo.vue
`js


``

Demo

!bodyScrollLock

platform | link |
| - | -
gh-pages | https://tuateam.github.io/tua-body-scroll-lock |
jsbin | https://jsbin.com/cafiful/edit?output |
codepen | https://codepen.io/buptsteve/pen/PvNQjP |
jsfiddle | https://jsfiddle.net/buptsteve/6u8g3Lf5/ |
codesandbox | https://codesandbox.io/s/o73z4jy5q9 |

Contributors

Thanks goes to these wonderful people (emoji key):

evinma 💻 📖 🚇 🌍

StEve Young 💻 📖 🚇 🌍

li2go 💻 🐛

songyan,Wang 💻 🐛

Даниил Пронин 🐛

阿卡琳 🐛

falstack 💻

This project follows the all-contributors specification. Contributions of any kind welcome!