Tua-body-scroll-lock NPM

tua-body-scroll-lock

Introduction

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

Open in codesandbox
Open in jsfiddle
Open in jsbin

Install

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>

Usage

Normal

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

lock()
unlock()

Options

overflowType: 'hidden' | 'clip'

optional, default: 'hidden'

clip is suitable for adapting elements of position: sticky in high-version browsers (Chrome 90 +).

https://caniuse.com/mdn-css_types_overflow_clip

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

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

useGlobalLockState: boolean

optional, default: false

Whether to use global lockState for every BSL. It's useful when your page have multiple BSL instances.

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.

clearBodyLocks

In the SPA, if you called lock, but forgot to call unlock before jumping to other pages, that is too bad. Because the operation of the page is not restored, such as forbid touchmove, clearBodyLocks is used to clear all side effects. Sure, you can also call unlock, but if you have called lock multiple times, you must call unlock multiple times, which is very unfriendly.