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?

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

Try This

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 targetElement = document.querySelector('#someElementId')

lock(targetElement)
unlock(targetElement)