useScrollLock

import { useScrollLock } from "reshaped";

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

Locking page scrolling is typically implemented when displaying content on top of the page to prevent users from scrolling the background until the content is closed. You can experiment with the following demo to observe how it functions:

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>
    </View>
  );
}

(options: {
  // Element triggering the lock to automatically find its closest scrollable parent to lock
  originRef?: RefObject<HTMLElement>;

  // Lock scrolling of a specific element insted of the document
  containerRef?: RefObject<HTMLElement>;
}) => {
  scrollLocked: boolean,
  lockScroll: () => void,
  unlockScroll: () => void,
}