tua-body-scroll-lock

tua-body-scroll-lock

inspired by body-scroll-lock

English | 简体中文

Introduction

tua-body-scroll-lock enables body scroll locking for everything.

Why not body-scroll-lock(BSL)?

• Doesn't work on Android webview
• Doesn't work on PC with mouse wheel
• Doesn't work on iOS, if you touch somewhere instead of targetElement
• Must pass targetElement, even if it's not necessary

😱Can't believe it? Please try this demo with BSL yourself.

Install

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

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

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

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

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

Usage

Normal

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

lock()
unlock()

TargetElement needs scrolling（iOS only）

In some scenarios, when scrolling is prohibited, some elements still need to scroll, at this point, pass the targetElement.

import { lock, unlock } from 'tua-body-scroll-lock'
const elementOne = document.querySelector('#elementOne')
const elementTwo = document.querySelector('#elementTwo')

// one targetElement
const targetElement = elementOne
// multiple targetElements
const targetElements = [elementOne, elementTwo]

lock(targetElement)
lock(targetElements)
unlock(targetElement)
unlock(targetElements)

The targetElement is not required on the PC and Android.

Demo

platform	link
gh-pages	https://tuateam.github.io/tua-body-scroll-lock
jsbin	https://jsbin.com/cafiful/edit?output
codepen	https://codepen.io/buptsteve/pen/PvNQjP
jsfiddle	https://jsfiddle.net/buptsteve/6u8g3Lf5/
codesandbox	https://codesandbox.io/s/o73z4jy5q9

Contributors

Thanks goes to these wonderful people (emoji key):

evinma 💻 📖 🚇 🌍

StEve Young 💻 📖 🚇 🌍

li2go 💻 🐛

songyan,Wang 💻 🐛

Даниил Пронин 🐛

阿卡琳 🐛

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