Have ideas to improve npm?Join in the discussion! »

    tua-body-scroll-lock
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    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!

    Install

    npm i tua-body-scroll-lock

    DownloadsWeekly Downloads

    22,522

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    54.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar
    • avatar