Closed ghost closed 3 years ago
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 🤔
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>
</>
);
};
Stop body from scrolling when sheet is open
https://codesandbox.io/s/nice-firefly-ldjtr