๐ Body scroll locking that just works with everything
English | ็ฎไฝไธญๆ
tua-body-scroll-lock
enables body scroll locking for everything.
pnpm i tua-body-scroll-lock
<!-- unpkg -->
<script src="https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.js"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.js"></script>
<!-- unpkg -->
<script src="https://unpkg.com/tua-body-scroll-lock"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock"></script>
<!-- unpkg -->
<script type="module">
import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'
lock()
unlock()
</script>
<!-- jsdelivr -->
<script type="module">
import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'
lock()
unlock()
</script>
<!-- unpkg -->
<script type="module">
import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'
lock()
unlock()
</script>
<!-- jsdelivr -->
<script type="module">
import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'
lock()
unlock()
</script>
import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()
optional, default: 'hidden'
clip
is suitable for adapting elements of position: sticky
in high-version browsers (Chrome 90 +).
import { lock } from 'tua-body-scroll-lock'
lock(targetElement, { overflowType: 'clip' })
optional, default: false
Whether to use global lockState
for every BSL. It's useful when your page have multiple BSL instances.
In some scenarios, when scrolling is prohibited, some elements still need to scroll, at this point, pass the targetElement.
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.
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.
Please see these examples:
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!
inspired by body-scroll-lock