Code
<script lang="ts">
import { useScrollLock } from 'svelora';
let open = $state(false);
useScrollLock(() => open);
</script>
<button onclick={() => (open = !open)}>
{open ? 'Unlock' : 'Lock'} page scroll
</button>
useScrollLock
Lock scroll on an element (default document.body) while a reactive locked is true. Compensates for the scrollbar width to avoid layout jump, reference-counts
nested locks, and restores the original styles on release. SSR-safe.
Lock an element
Toggle to lock scrolling inside the box below. Try scrolling it while locked.
Scrollable
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
Row 17
Row 18
Row 19
Row 20
Row 21
Row 22
Row 23
Row 24
Lock the page (body)
The default target is document.body — this is what Modal / Slideover / Drawer
use to freeze the page behind an overlay. Toggle and try scrolling the page.
Page scrollable