diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index 5a41181..c4cf8b5 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -19,6 +19,8 @@ interface ModalProps { wide?: boolean; } +const TRANSITION_DURATION = 300; + export function Modal({ children, lockBody = true, @@ -34,9 +36,12 @@ export function Modal({ useEffect(() => { if (show && lockBody) { - document.body.style.overflow = 'hidden'; + document.body.style.overflowY = 'hidden'; } else if (lockBody) { - document.body.style.overflow = 'auto'; + // Wait for transition to finish before allowing scrollbar to return + setTimeout(() => { + document.body.style.overflowY = 'auto'; + }, TRANSITION_DURATION); } }, [show, lockBody]); @@ -68,6 +73,7 @@ export function Modal({