Stop body from scrolling

[ghost]

Stop body from scrolling when sheet is open

https://codesandbox.io/s/nice-firefly-ldjtr

[Temzasse]

Disabling body scrolling should already be automatically handled by Framer Motion so I'm quite hesitant to add a custom implementation on top of it 🤔

[Temzasse]

This can also be easily added outside of React Modal Sheet if the built-in body scroll disabling does not work as intended.

const Example = () => {
  const [isOpen, setOpen] = React.useState(false);
  const open = () => setOpen(true);
  const close = () => setOpen(false);

  React.useEffect(() => {
    if (isOpen) {
      document.querySelector("body").style.overflow = "hidden";
    } else {
      document.querySelector("body").style.removeProperty("overflow");
    }
  }, [isOpen]);

  return (
    <>
      <Button onClick={open}>Open bottom sheet</Button>

      <Sheet isOpen={isOpen} onClose={close}>
        <Sheet.Container>
          <Sheet.Header />
          <Sheet.Content>{/* Sheet content here */}</Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop />
      </Sheet>
    </>
  );
};