模式打開時如何在 IOS 中停止主體滾動（反應）

Question

我發現這個指南有效： https://codepen.io/geoffgraham/pen/LogERe

我創建了這個使用我的 React 應用程序中的代碼的助手：

 export const removeBodyScrollingWhenModalOpen = (
        modalOpen: boolean,
    ) => {
        if (modalOpen) {
            document.body.style.position = 'fixed';
            document.body.style.top = `-${window.scrollY}px`;
        } else {
            const scrollY = document.body.style.top;
            document.body.style.position = '';
            document.body.style.top = '';
            window.scrollTo(0, parseInt(scrollY || '0') * -1);
        }
 };

與模式一起使用時：

const handleClose = () => {
    onClose(false);
    removeBodyScrollingWhenModalOpen(false);
};

useEffect(() => {
    removeBodyScrollingWhenModalOpen(open);
}, [open]);

但是，為了使代碼正常工作並且在模式關閉時不會松動滾動 position，我需要添加這段代碼：

window.addEventListener('scroll', () => {
  document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
});

但不確定如何用上面的鈎子實現它，有什么想法嗎？

Answer 1

這是我想出的最佳解決方案：

export const removeBodyScrollingWhenModalOpen = (modalOpen: boolean) => {
    console.log('modalOpen: ', modalOpen);
    const body = document.body;
    if (modalOpen && isMobile()) {
        const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
        body.style.position = 'fixed';
        body.style.top = `-${scrollY}`;
    } else if (!modalOpen && isMobile()) {
        const scrollY = body.style.top;
        body.style.position = '';
        body.style.top = '';
        window.scrollTo(0, parseInt(scrollY || '0') * -1);
    } else if (modalOpen) {
        document.body.style.overflowY = 'hidden';
    } else {
        document.body.style.overflowY = 'visible';
    }
};