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

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

Use

$3


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

$3


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

$3

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

$3

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
`sh
cp ./node_modules/@substrate-system/scroll-lock/dist/module.min.js ./public
`

#### HTML
`html

`

CSS

This module depends on CSS.

$3

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

Or minified:
`js
import '@substrate-system/scroll-lock/css/min'
``