Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tuax/tua-body-scroll-lock
🔐 Body scroll locking that just works with everything
https://github.com/tuax/tua-body-scroll-lock
android body-scroll-lock bsl chrome firefox freeze ios mobile modal overflow pc safari scroll-lock tua
Last synced: 22 days ago
JSON representation
🔐 Body scroll locking that just works with everything
- Host: GitHub
- URL: https://github.com/tuax/tua-body-scroll-lock
- Owner: tuax
- License: mit
- Created: 2019-03-20T11:43:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-29T06:05:05.000Z (8 months ago)
- Last Synced: 2024-05-10T05:03:26.392Z (6 months ago)
- Topics: android, body-scroll-lock, bsl, chrome, firefox, freeze, ios, mobile, modal, overflow, pc, safari, scroll-lock, tua
- Language: TypeScript
- Homepage: https://tuax.github.io/tua-body-scroll-lock/
- Size: 343 KB
- Stars: 396
- Watchers: 7
- Forks: 30
- Open Issues: 1
-
Metadata Files:
- Readme: README-zh_CN.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# tua-body-scroll-lock
[English](./README.md) | 简体中文
## 介绍
`tua-body-scroll-lock` 解决了所有场景下滚动穿透的问题。
-
-
- Open in codesandbox
- Open in jsfiddle
- Open in jsbin
## 安装
### Node Package Manager(recommended)
```bash
pnpm i tua-body-scroll-lock
```
### CDN
UMD(`tua-bsl.umd.js`)
```html
```
压缩版本的 UMD(`tua-bsl.umd.min.js`)
```html
```
ESM in browser(`tua-bsl.esm.browser.js`)
```html
import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'
lock()
unlock()
import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js'
lock()
unlock()
```
压缩版本的 ESM in browser(`tua-bsl.esm.browser.min.js`)
```html
import { lock, unlock } from 'https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'
lock()
unlock()
import { lock, unlock } from 'https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js'
lock()
unlock()
```
## 使用
### 常规操作
```js
import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()
```
### 选项
#### overflowType: 'hidden' | 'clip'
可选，默认值: 'hidden'
`clip` 适合在高版本浏览器中（Chrome 90+）适配 `position: sticky` 的元素。
> https://caniuse.com/mdn-css_types_overflow_clip
```js
import { lock } from 'tua-body-scroll-lock'
lock(targetElement, { overflowType: 'clip' })
```
#### useGlobalLockState: boolean
可选，默认值: false
是否为页面上所有 BSL 实例共享 `lockState` 的状态。在你的页面上有多个 BSL 实例时很有用。
### 目标元素需要滚动（iOS only）
在某些场景下，禁止滚动穿透时，仍然有些元素需要滚动行为，此时传入目标 DOM 元素即可。
```js
import { lock, unlock } from 'tua-body-scroll-lock'
const elementOne = document.querySelector('#elementOne')
const elementTwo = document.querySelector('#elementTwo')
// 一个目标元素
const targetElement = elementOne
// 多个目标元素
const targetElements = [elementOne, elementTwo]
lock(targetElement)
lock(targetElements)
unlock(targetElement)
unlock(targetElements)
```
> PC 端和安卓端不需要传 targetElement。
### clearBodyLocks
在单页应用中，如果调用过`lock`，但是在跳转其他路由下的页面前忘记调用`unlock`，这是很糟糕的。因为对页面的操作都没有恢复，比如ios中禁止了`touchmove`；`clearBodyLocks`就是用来清除所有的副作用。当前你也可以调用`unlock`，但是如果之前调用过多次`lock`，那么就必须要调用多次`unlock`，这样很不友好。
## 示例
请查看这些示例项目
- [vue](./examples/vue/)
- [react](./examples/react/)
- [vanilla](./examples/vanilla/)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
evinma
💻 📖 🚇 🌍
StEve Young
💻 📖 🚇 🌍
li2go
💻 🐛
songyan,Wang
💻 🐛
Даниил Пронин
🐛
阿卡琳
🐛
falstack
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
> inspired by [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)