https://github.com/rameel/pagelock
A simple utility for managing page scroll locking. No external dependencies.
https://github.com/rameel/pagelock
page-locking pagelock scroll-lock scroll-locking
Last synced: 5 months ago
JSON representation
A simple utility for managing page scroll locking. No external dependencies.
- Host: GitHub
- URL: https://github.com/rameel/pagelock
- Owner: rameel
- License: mit
- Created: 2024-01-29T20:01:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-09T15:30:28.000Z (about 1 year ago)
- Last Synced: 2025-10-19T23:17:14.495Z (7 months ago)
- Topics: page-locking, pagelock, scroll-lock, scroll-locking
- Language: TypeScript
- Homepage:
- Size: 24.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @ramstack/pagelock
[](https://www.npmjs.com/package/@ramstack/pagelock)
[](https://github.com/rameel/pagelock/blob/main/LICENSE)
`@ramstack/pagelock` is a simple utility for managing page scroll locking.
The library is around 750 bytes in size and has no external dependencies.
## Installation
### Using NPM
```sh
npm install --save @ramstack/pagelock
```
### Using CDN
```html
```
## Usage examples
#### Vanilla JS
```vue
Show Modal
let release;
async function show() {
// Lock the page scroll before showing the modal dialog
release = pagelock();
await showModal();
// Unlock the page scroll
release();
}
```
#### Vue
```vue
import { ref, watch } from "vue";
import { pagelock } from "@ramstack/pagelock";
let show = ref(false);
let release;
watch(show, value => {
if (value) {
// Lock page scroll
release = pagelock();
}
else {
// Unlock page scroll
release?.();
}
});
Lock page
```
## Functions
```js
/**
* Locks the page scroll. Subsequent calls to the function add to the queue of lock holders.
* The page scroll remains locked until the queue is empty. To forcibly release the page scroll,
* bypassing the queue, call the {@link pageunlock} function with `force = true`.
*
* @returns {() => void} - A function to unlock the page scroll.
* Subsequent calls to this release function are safe: it only releases its own lock
* without affecting the others in the queue.
*/
function pagelock(): () => void;
```
```js
/**
* Unlocks the page scroll. Unlike the release function returned by {@link pagelock},
* this function removes locks from the end of the queue (one by one).
*
* @param {boolean} [force] - If `true`, forcibly unlocks the page scroll, clearing the entire queue.
* Otherwise, only the most recent lock is released. Defaults to `false`.
*/
function pageunlock(force?: boolean): void;
```
## License
This package is released under the **MIT License**.