@svelte-put/lockscroll
locking scroll and hide scrollbar within an HTML element
Installation
terminal
npm install --save-dev @svelte-put/lockscrollQuick Start
apply scroll lock on the body element
<script>
import { lockscroll } from '@svelte-put/lockscroll';
let locked = false;
function toggleLockScroll() {
locked = !locked;
}
</script>
<svelte:body use:lockscroll={locked} />
<button class="c-btn-primary" on:click={toggleLockScroll}>Toggle lock scroll on body</button>
Locking any Scroll Container
In Quick Start , lockscroll is used on
the body element. In reality, the scroll container might be set up differently; it
can be a div instead, for example. For this reason, lockscroll works
with any
Scroll container .
works with any scroll container
<script lang="ts">
import { lockscroll } from '@svelte-put/lockscroll';
let locked = false;
</script>
<button class="c-btn-primary" 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>
Helper createLockScrollStore
The helper createLockScrollStore can be used to generate an idiomatic store, which
is just a Writable<boolean> with a builtin toggle method. This is helpful
if the scroll lock needs to be toggle in non-svelte files. For example, a global store can be created
and reused across the site.
createLockScrollStore helper
<script>
import { lockscroll, createLockScrollStore } from '@svelte-put/lockscroll';
let locked = createLockScrollStore();
</script>
<svelte:body use:lockscroll={locked} />
<div class="flex gap-4">
<button class="c-btn-primary" on:click={() => locked.toggle()}>Toggle lock scroll</button>
<button class="c-btn-primary-outline" on:click={() => locked.toggle(true)}>Force locked</button>
<button class="c-btn-primary-outline" on:click={() => locked.toggle(false)}>Force unlocked</button
>
</div>
Here the store is passed directly to lockscroll without unpacking ($store).
lockscroll conveniently accepts any svelte store with
boolean value.
Event
A lockscroll:toggle event is fired when lock scroll state changes.
on:lockscroll:toggle event
<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-primary" on:click={toggleLockScroll}>Toggle lock scroll</button>
Happy locking scroll! 👨💻