Lock scroll at current position


use-scroll-lock locks scroll at current position by setting document.body overflow to hidden.

import { useScrollLock } from '@mantine/hooks';
import { Button } from '@mantine/core';
import { LockClosedIcon, LockOpen2Icon } from '@modulz/radix-icons';
function Demo() {
const [scrollLocked, setScrollLocked] = useScrollLock();
return (
<Group position="center">
onClick={() => setScrollLocked((c) => !c)}
leftIcon={scrollLocked ? <LockClosedIcon /> : <LockOpen2Icon />}
{scrollLocked ? 'Unlock scroll' : 'Lock scroll'}

Scrollbars offset

In some operation systems scrollbars have width To offset that width use-scroll-lock adds padding-right equal to scrollbar width to body element when scroll is locked. However if you use elements with fixed position you will need to add right padding manually: padding-right: var(--removed-scroll-width, 0px)).


function useScrollLock<T extends HTMLElement = HTMLDivElement>(
lock?: boolean,
options?: { disableBodyPadding?: boolean }
): readonly [boolean, Dispatch<SetStateAction<boolean>>];
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback