use-scroll-lock

Lock scroll at current position
Import
Source
View source code
Docs
Edit this page
Package
@mantine/hooks

Usage

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

import { useScrollLock } from '@mantine/hooks';
import { Button, Group } from '@mantine/core';
import { IconLock, IconLockOpen } from '@tabler/icons';


function Demo() {
  const [scrollLocked, setScrollLocked] = useScrollLock();


  return (
    <Group position="center">
      <Button
        onClick={() => setScrollLocked((c) => !c)}
        variant="outline"
        leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />}
      >
        {scrollLocked ? 'Unlock scroll' : 'Lock scroll'}
      </Button>
    </Group>
  );
}

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)).

Definition

function useScrollLock<T extends HTMLElement = HTMLDivElement>(
  lock?: boolean,
  options?: { disableBodyPadding?: boolean }
): readonly [boolean, Dispatch<SetStateAction<boolean>>];
Go back
use-scroll-into-view – @mantine/hooks
Up next
use-viewport-size – @mantine/hooks
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter