Package Exports

tua-body-scroll-lock

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tua-body-scroll-lock) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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)