tua-body-scroll-lock

inspired by body-scroll-lock

English | 简体中文

介绍

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

为什么不用 body-scroll-lock(BSL)？

低版本安卓下失效
PC 端滚轮行为失效
iOS 端触摸非 targetElement 时失效
使用时必须传 targetElement（即使并不需要）

😱BSL 居然不能用？不妨自己试试这个用了 BSL 的 demo

安装

Node Package Manager(recommended)


$ npm i -S tua-body-scroll-lock
# OR
$ yarn add tua-body-scroll-lock

CDN

UMD(tua-bsl.umd.js)
- unpkg: https://unpkg.com/tua-body-scroll-lock
- jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock

example code


x
<!-- unpkg -->
<script src="https://unpkg.com/tua-body-scroll-lock"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock"></script>

Minified UMD(tua-bsl.umd.min.js)
- unpkg: https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.min.js
- jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.min.js

example code


xxxxxxxxxx
<!-- unpkg -->
<script src="https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.umd.min.js"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.umd.min.js"></script>

ESM in browser(tua-bsl.esm.browser.js)
- unpkg: https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js
- jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.js

example code


xxxxxxxxxx
<!-- 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>

Minified ESM in browser(tua-bsl.esm.browser.min.js)
- unpkg: https://unpkg.com/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js
- jsdelivr: https://cdn.jsdelivr.net/npm/tua-body-scroll-lock/dist/tua-bsl.esm.browser.min.js

example code


xxxxxxxxxx
<!-- 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>

使用

常规操作


xxxxxxxxxx
import { lock, unlock } from 'tua-body-scroll-lock'
lock()
unlock()

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

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


xxxxxxxxxx
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，这样很不友好。

demo.vue


xxxxxxxxxx
<template>
  // some element
</template>
<script>
import { lock, unlock, clearBodyLocks } from 'tua-body-scroll-lock';
export default {
  name: 'demo',
  data () {
    return {}
  },
  methods: {
    showDialog () {
      // 禁止滑动
      lock()
    },
    hideDialog () {
      // 开始滑动
      unlock()
    }
  },
  beforeDestroy () {
    // 在跳转其他路由下的页面前忘记调用`unlock`，`clearBodyLocks`可以清除所有的副作用。
    clearBodyLocks()
  }
}
</script>