tua-body-scroll-lock

English | 简体中文

介绍

tua-body-scroll-lock 解决了所有场景下滚动穿透的问题。

• Open in codesandbox
• Open in jsfiddle
• Open in jsbin

安装

Node Package Manager(recommended)

pnpm i tua-body-scroll-lock

CDN

<!-- 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()

选项

overflowType: 'hidden' | 'clip'

可选，默认值: 'hidden'

clip 适合在高版本浏览器中（Chrome 90+）适配 position: sticky 的元素。

https://caniuse.com/mdn-css_types_overflow_clip

import { lock } from 'tua-body-scroll-lock'

lock(targetElement, { overflowType: 'clip' })

useGlobalLockState: boolean

可选，默认值: false

是否为页面上所有 BSL 实例共享 lockState 的状态。在你的页面上有多个 BSL 实例时很有用。

目标元素需要滚动（iOS only）

在某些场景下，禁止滚动穿透时，仍然有些元素需要滚动行为，此时传入目标 DOM 元素即可。

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
• react
• vanilla

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

inspired by body-scroll-lock