Gathering detailed insights and metrics for tua-body-scroll-lock
Gathering detailed insights and metrics for tua-body-scroll-lock
🔐 Body scroll locking that just works with everything
Installations
npm install tua-body-scroll-lockDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM
Node Version
20.11.1
NPM Version
10.2.4
Score
99
Supply Chain
99.5
Quality
82.3
Maintenance
100
Vulnerability
100
License
Releases
20
Contributors
8
Unable to fetch Contributors
Languages
4
TypeScript
HTML
JavaScript
Shell
TypeScript (58.53%)
HTML (24.01%)
JavaScript (16.57%)
Shell (0.89%)
Developer
Download Statistics
Total Downloads
5,144,377
Last Day
11,935
Last Week
52,994
Last Month
255,809
Last Year
2,611,038
GitHub Statistics
437 Stars
102 Commits
33 Forks
7 Watching
4 Branches
8 Contributors
Bundle Size
3.88 kB
Minified
1.59 kB
Minified + Gzipped
Maintainers
2
Package Meta Information
Latest Version
1.5.3
Package Id
tua-body-scroll-lock@1.5.3
Unpacked Size
68.58 kB
Size
15.14 kB
File Count
27
NPM Version
10.2.4
Node Version
20.11.1
Publised On
25 Oct 2024
Total Downloads
Cumulative downloads
Total Downloads
5,144,377
Last day
0.5%
11,935
Compared to previous day
Last week
-16.7%
52,994
Compared to previous week
Last month
12.2%
255,809
Compared to previous month
Last year
75.4%
2,611,038
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
38
@babel/core@babel/preset-env@babel/preset-typescript@commitlint/cli@commitlint/config-conventional@rollup/plugin-babel@rollup/plugin-eslint@rollup/plugin-replace@rollup/plugin-terser@types/jest@types/node@typescript-eslint/eslint-plugin@typescript-eslint/parser@vue/eslint-config-typescriptall-contributors-clibabel-eslintbabel-jestbumppconcurrentlycross-enveslinteslint-config-standardeslint-plugin-importeslint-plugin-neslint-plugin-nodeeslint-plugin-promiseeslint-plugin-vuegh-pageshuskyis-cijestjest-environment-jsdomlint-stagedrimrafrolluprollup-plugin-typescript2typescriptvue-eslint-parser
Versions
tua-body-scroll-lock
English | 简体中文
Introduction
tua-body-scroll-lock enables body scroll locking for everything.
Install
Node Package Manager(recommended)
1pnpm i tua-body-scroll-lock
CDN
UMD(`tua-bsl.umd.js`)
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>
Minified UMD(`tua-bsl.umd.min.js`)
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>
ESM in browser(`tua-bsl.esm.browser.js`)
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>
Minified ESM in browser(`tua-bsl.esm.browser.min.js`)
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>
Usage
Normal
1import { lock, unlock } from 'tua-body-scroll-lock' 2 3lock() 4unlock()
Options
overflowType: 'hidden' | 'clip'
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' })
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.
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
targetElementis 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:
Contributors
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.