Custom hook to lock and unlock page scrolling.
Preserves the scroll position on lock and unlock
Avoids page width changes


import { useScrollLock } from "@uicapsule/components";

Backdrop utility component is using useScrollLock internally, so you don't have to worry about the scrolling if you're displaying the content inside the Backdrop.

Locking page scrolling is something you would usually do when you show content on top of the page and need to avoid the user scrolling the background until it's closed. You can try the following demo to see how it works:

function Example() {
const { scrollLocked, lockScroll, unlockScroll } = useScrollLock();
return (
<View gap={3} direction="row">
<Button onClick={() => lockScroll()}>Lock scroll</Button>
<Button onClick={() => unlockScroll()}>Unlock scroll</Button>

Arguments and return value

() => ({
scrollLocked: boolean,
lockScroll: () => {},
unlockScroll: () => {},