模态框弹出后页面背景仍可滚动的技术问题求助

你的代码问题出在useEffect的依赖是空数组，它只会在组件第一次挂载时执行一次。如果模态框是通过状态控制显示隐藏的，那这个逻辑不会在模态框打开/关闭时重复触发，而且组件卸载后也没恢复body的滚动状态，自然达不到预期效果。

直接调整代码，做好这两点就能解决：

• 把控制模态框显示的状态（比如isOpen，需确保组件接收这个props）加到useEffect的依赖数组里，让状态变化时重新执行逻辑
• 保存body原始的overflow值，在模态框关闭或组件卸载时恢复，避免影响其他场景

修改后的代码示例：

const Modal = ({ children, title, completion, isMyFlex, isOpen, ...rest }: Props) => {
    useEffect(() => {
        // 先存好body原本的overflow设置
        const originalOverflow = document.body.style.overflow;

        if (isOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = originalOverflow;
        }

        // 组件卸载或者依赖变化时，恢复原始状态
        return () => {
            document.body.style.overflow = originalOverflow;
        };
    }, [isOpen]) // 依赖模态框的显示状态

    // 其他组件逻辑...
}

额外提醒：

• 要确认Modal组件确实接收了类似isOpen的状态props，用来控制模态框的显示/隐藏
• 少数场景下body可能被其他样式覆盖（比如存在position: fixed的父元素），这时候可以试试给body加position: fixed同时记录滚动位置，关闭时恢复位置，但大部分情况上面的代码就够用

内容的提问来源于stack exchange，提问作者János