diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index 3dc7a417..fe193b78 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -17,6 +17,7 @@ import { useQuery } from '@tanstack/react-query'; import { addDays, format } from 'date-fns'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { handleScrollLock } from '@/shared/utils/scroll-lock'; const Home = () => { const { activeType, changeTab, isSingle, isGroup } = useTabState(); @@ -39,6 +40,8 @@ const Home = () => { const { needsMatchingSetup } = useAuth(); + handleScrollLock(needsMatchingSetup); + useEffect(() => { const from = needsMatchingSetup ? 'onboarding' : 'return_user'; gaEvent('home_enter', { from }); diff --git a/src/shared/components/bottom-sheet/bottom-sheet.tsx b/src/shared/components/bottom-sheet/bottom-sheet.tsx index f4f73871..91cd0797 100644 --- a/src/shared/components/bottom-sheet/bottom-sheet.tsx +++ b/src/shared/components/bottom-sheet/bottom-sheet.tsx @@ -4,6 +4,7 @@ import { cn } from '@libs/cn'; import { AnimatePresence, motion } from 'framer-motion'; import { useRef } from 'react'; import { createPortal } from 'react-dom'; +import { handleScrollLock } from '@/shared/utils/scroll-lock'; interface BottomSheetProps { isOpen: boolean; @@ -25,6 +26,8 @@ const BottomSheet = ({ const sheetRef = useRef(null); useOutsideClick(sheetRef, onClose); + handleScrollLock(isOpen); + return createPortal( {isOpen && ( diff --git a/src/shared/utils/scroll-lock.ts b/src/shared/utils/scroll-lock.ts new file mode 100644 index 00000000..5c4290e1 --- /dev/null +++ b/src/shared/utils/scroll-lock.ts @@ -0,0 +1,9 @@ +export const handleScrollLock = (isOpen: boolean) => { + if (isOpen) { + document.body.style.overflow = 'hidden'; + document.body.style.touchAction = 'none'; + } else { + document.body.style.removeProperty('overflow'); + document.body.style.removeProperty('touch-action'); + } +};