@svelte-put/lockscroll
Installation
npm install --save-dev @svelte-put/lockscrollpnpm add -D @svelte-put/lockscrollyarn add -D @svelte-put/lockscrollQuick Start
In this minimal example, try clicking on the button below to toggle scroll-lock on <body>.
<script>
import { lockscroll } from '@svelte-put/lockscroll';
let locked = false;
function toggleLockScroll() {
locked = !locked;
}
</script>
<svelte:body use:lockscroll={locked} />
<button class="c-btn mx-auto" on:click={toggleLockScroll}>Toggle lock scroll on body</button>Locking any Scroll Container
In Quick Start, lockscroll is used on the <body>element. In practice, you can place lockscroll on any scroll container, as shown in the example below.
<script lang="ts">
import { lockscroll } from '@svelte-put/lockscroll';
let locked = false;
</script>
<button class="c-btn mx-auto" on:click={() => (locked = !locked)}
>Toggle lock scroll for below section</button
>
<section class="mt-4 max-h-[400px] overflow-auto rounded bg-bg-soft px-6" use:lockscroll={locked}>
{#each new Array(10) as _}
<p>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
</p>
{/each}
</section>createLockScrollStore Helper
The exported helper createLockScrollStore can be used to generate an idiomatic Svelte store, which is just a Writable<boolean> with a builtin toggle method. This is helpful if the scroll lock needs to be toggled in non-svelte files. For example, a global store can be created and reused across the site.
<script>
import { lockscroll, createLockScrollStore } from '@svelte-put/lockscroll';
// can be created in js/ts files or within a Svelte context
let locked = createLockScrollStore();
</script>
<svelte:body use:lockscroll={locked} />
<div class="flex gap-4 justify-center">
<button class="c-btn" on:click={() => locked.toggle()}>Toggle lock scroll</button>
<button class="c-btn c-btn--outlined" on:click={() => locked.toggle(true)}>Force locked</button>
<button class="c-btn c-btn--outlined" on:click={() => locked.toggle(false)}>Force unlocked</button
>
</div>lockscroll:toggle CustomEvent
When lock scroll state changes, a lockscroll:toggle CustomEvent is on from the element the action is placed on.
<script lang="ts">
import { lockscroll, type LockScrollDetail } from '@svelte-put/lockscroll';
let locked = false;
function toggleLockScroll() {
locked = !locked;
}
function onToggleLockScroll(e: CustomEvent<LockScrollDetail>) {
console.log('New scroll lock state:', e.detail.locked);
}
</script>
<!-- event should be automatically typed if used in Typescript -->
<svelte:body use:lockscroll={locked} on:lockscroll:toggle={onToggleLockScroll} />
<button class="c-btn" on:click={toggleLockScroll}>Toggle lock scroll</button>Happy locking scroll! 👨💻