React组件切换过渡时如何隐藏溢出？滚动条异常问题求解

核心问题分析 #

给body设置overflow:hidden会全局禁用滚动，导致About区域的长内容无法正常滚动；直接给Home的motion.div加overflow:hidden无效，是因为这个过渡元素本身是要移出视口的，只有它的父容器设置溢出限制，才能挡住过渡时的内容溢出。

具体解决方案 #

1. 给过渡组件的父容器设置溢出限制

把Home和About的motion.div放在一个固定尺寸的父容器里，让过渡动画在这个容器内执行，同时单独给About的内容区开启滚动：

/* 父容器样式 */
.page-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* About内容区样式（长内容放在这里） */
#skills-content {
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  /* 可选：自定义滚动条样式 */
  scrollbar-width: thin;
}

对应的组件结构：

// 页面切换的父容器
<div className="page-wrapper">
  <AnimatePresence mode="wait">
    {currentPage === 'home' ? (
      <motion.div 
        id="container" 
        key="home"
        initial={{ opacity:0 }} 
        animate={{ opacity:1, transition:{ delay:0.3 }}} 
        exit={{x:"-100vw", transition:{ ease:"easeInOut", duration:0.3 }}}
      >
        {/* Home页面内容 */}
      </motion.div>
    ) : (
      <motion.div 
        id="skills-container" 
        key="about"
        initial={{ opacity:0 }} 
        animate={{ opacity:1, transition:{ delay:0.3 }}} 
        exit={{x:"-100vw", transition:{ ease:"easeInOut" }}}
      >
        {/* About长内容放在这个滚动容器里 */}
        <div id="skills-content">
          {/* 你的About内容 */}
        </div>
      </motion.div>
    )}
  </AnimatePresence>
</div>

2. 动态控制body的overflow（替代全局设置）

如果必须用body控制溢出，可以通过Framer Motion的动画事件，在过渡开始时禁用滚动，结束后恢复：

import { useAnimationControls } from "framer-motion";

const PageTransition = () => {
  const controls = useAnimationControls();

  // 监听动画状态，动态切换body类名
  useEffect(() => {
    const handleTransitionStart = () => {
      document.body.classList.add('overflow-lock');
    };
    const handleTransitionEnd = () => {
      document.body.classList.remove('overflow-lock');
    };

    controls.on('start', handleTransitionStart);
    controls.on('complete', handleTransitionEnd);

    return () => {
      controls.clearListeners('start', handleTransitionStart);
      controls.clearListeners('complete', handleTransitionEnd);
    };
  }, [controls]);

  return (
    <motion.div 
      controls={controls}
      id="container" 
      initial={{ opacity:0 }} 
      animate={{ opacity:1, transition:{ delay:0.3 }}} 
      exit={{x:"-100vw", transition:{ ease:"easeInOut", duration:0.3 }}}
    >
      {/* 页面内容 */}
    </motion.div>
  );
};

对应的CSS：

.overflow-lock {
  overflow: hidden;
  /* 防止滚动条消失导致页面跳动 */
  padding-right: var(--scrollbar-width, 0);
}

内容的提问来源于stack exchange，提问作者Vicky X