JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 70956
  • Score
    100M100P100Q182718F
  • License MIT

🔐Body scroll locking that just works with everything

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

dependencies Downloads per month Version Next Version License

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

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

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.

demo.vue

<template>
  // some element
</template>
<script>
import { lock, unlock, clearBodyLocks } from 'tua-body-scroll-lock';

export default {
  name: 'demo',
  data () {
    return {}
  },
  methods: {
    showDialog () {
      // Disable body scroll
      lock()
    },
    hideDialog () {
      // Enable body scroll
      unlock()
    }
  },
  beforeDestroy () {
    // If forgot to call unlock before jumping to other pages, `clearBodyLocks` can clean all side effect.
    clearBodyLocks()
  }
}
</script>

Demo

bodyScrollLock

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
💻 🐛
Даниил Пронин
🐛
阿卡琳
🐛
falstack
💻

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