🔐Body scroll locking that just works with everything
npm install tua-body-scroll-lockEnglish | 简体中文
tua-body-scroll-lock enables body scroll locking for everything.-
width="160"
alt="Open in codepen"
src="https://assets.codepen.io/t-1/codepen-logo.svg"
/>
- Open in codesandbox
- Open in jsfiddle
- Open in jsbin
``bash`
pnpm i tua-body-scroll-lock
)`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
`
`js
import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()
`
Version: 1.6.0+false
Optional, default:
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.
`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.
, 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.Please see these examples:
- vue
- react
- vanilla
Thanks goes to these wonderful people (emoji key):
evinma 💻 📖 🚇 🌍 | StEve Young 💻 📖 🚇 🌍 | li2go 💻 🐛 | songyan,Wang 💻 🐛 | Даниил Пронин 🐛 | 阿卡琳 🐛 | falstack 💻 |
David Q. Jin 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
> inspired by body-scroll-lock