scroll lock

Prevent scrolling programmatically, useful for things like modal windows.

Originally seen in shoelace.

See a live demo

Contents

• Install
• Use
  • Example
• Modules
  • ESM
  • Common JS
  • pre-built JS
• CSS
  • Import

Install

npm i -S @substrate-system/scroll-lock

Use

Example

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')
})

Modules

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

ESM

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

Common JS

require('@substrate-system/scroll-lock')

pre-built JS

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.

copy

cp ./node_modules/@substrate-system/scroll-lock/dist/module.min.js ./public

HTML

<script type="module" src="./module.min.js"></script>

CSS

This module depends on CSS.

Import

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

Or minified:

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