@substrate-system/scroll-lock
    Preparing search index...

    @substrate-system/scroll-lock

    scroll lock

    tests types module semantic versioning Common Changelog install size gzip size dependencies license

    Prevent scrolling programmatically, useful for things like modal windows.

    Originally seen in shoelace.

    See a live demo

    Contents

    npm i -S @substrate-system/scroll-lock
    
    import {
    lockBodyScrolling,
    unlockBodyScrolling
    } from '@substrate-system/scroll-lock'
    import '@substrate-system/scroll-lock/css'

    document.getElementById('lock')?.addEventListener('click', ev => {
    ev.preventDefault()
    lockBodyScrolling(document.body)
    console.log('lock')
    })

    document.getElementById('unlock')?.addEventListener('click', ev => {
    ev.preventDefault()
    unlockBodyScrolling(document.body)
    console.log('unlocked')
    })

    This exposes ESM and common JS via package.json exports field.

    import {
    lockBodyScrolling,
    unlockBodyScrolling
    } from '@substrate-system/scroll-lock'
    require('@substrate-system/scroll-lock')
    

    This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

    cp ./node_modules/@substrate-system/scroll-lock/dist/module.min.js ./public
    
    <script type="module" src="./module.min.js"></script>
    

    This module depends on CSS.

    import '@substrate-system/scroll-lock/css'
    

    Or minified:

    import '@substrate-system/scroll-lock/css/min'