Lock scroll at current position


Use this hook when you want to prevent user from scrolling on document level, for example, with modals and drawers.

Example modal component, whenever modal is opened, scroll is locked at current scroll position. Hook accepts one argument – boolean value that controls if scroll is locked:

import { useScrollLock } from '@mantine/hooks';
function Modal({ opened }) {
if (!opened) {
return null;
return <div>My modal</div>;


When hooks is called with true, it sets to hidden. When component is unmounted, scroll lock is automatically removed:

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

use-scroll-lock is used in some components in @mantine/core, example with Modal component:

import React, { useState } from 'react';
import { Modal, Button, Group } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
onClose={() => setOpened(false)}
title="Introduce yourself!"
<AuthenticationForm />
<Group position="center">
<Button onClick={() => setOpened(true)}>Open Modal</Button>


function useScrollLock(
lock?: boolean
): readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>];
Build fully functional accessible web applications with ease
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