Gathering detailed insights and metrics for tua-body-scroll-lock-d3r
Gathering detailed insights and metrics for tua-body-scroll-lock-d3r
Gathering detailed insights and metrics for tua-body-scroll-lock-d3r
Gathering detailed insights and metrics for tua-body-scroll-lock-d3r
🔐 Body scroll locking that just works with everything
npm install tua-body-scroll-lock-d3r
Typescript
Module System
Node Version
NPM Version
TypeScript (58.53%)
HTML (24.01%)
JavaScript (16.57%)
Shell (0.89%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
444 Stars
102 Commits
33 Forks
6 Watchers
4 Branches
8 Contributors
Updated on Jul 07, 2025
Latest Version
1.5.3
Package Id
tua-body-scroll-lock-d3r@1.5.3
Unpacked Size
68.60 kB
Size
15.14 kB
File Count
27
NPM Version
10.8.2
Node Version
20.18.1
Published on
Dec 20, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
38
English | 简体中文
tua-body-scroll-lock
enables body scroll locking for everything.
1pnpm i tua-body-scroll-lock
1<!-- unpkg --> 2<script src="https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.js"></script> 3 4<!-- jsdelivr --> 5<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.js"></script>
1<!-- unpkg --> 2<script src="https://unpkg.com/tua-body-scroll-lock"></script> 3 4<!-- jsdelivr --> 5<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock"></script>
1<!-- unpkg --> 2<script type="module"> 3 import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js' 4 5 lock() 6 unlock() 7</script> 8 9<!-- jsdelivr --> 10<script type="module"> 11 import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js' 12 13 lock() 14 unlock() 15</script>
1<!-- unpkg --> 2<script type="module"> 3 import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js' 4 5 lock() 6 unlock() 7</script> 8 9<!-- jsdelivr --> 10<script type="module"> 11 import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js' 12 13 lock() 14 unlock() 15</script>
1import { lock, unlock } from 'tua-body-scroll-lock' 2 3lock() 4unlock()
optional, default: 'hidden'
clip
is suitable for adapting elements of position: sticky
in high-version browsers (Chrome 90 +).
1import { lock } from 'tua-body-scroll-lock' 2 3lock(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.
1import { lock, unlock } from 'tua-body-scroll-lock' 2const elementOne = document.querySelector('#elementOne') 3const elementTwo = document.querySelector('#elementTwo') 4 5// one targetElement 6const targetElement = elementOne 7// multiple targetElements 8const targetElements = [elementOne, elementTwo] 9 10lock(targetElement) 11lock(targetElements) 12unlock(targetElement) 13unlock(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 💻 |
David Q. Jin 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
inspired by body-scroll-lock
No vulnerabilities found.
No security vulnerabilities found.