React styled-components模态框出现双滚动条 如何移除主滚动条

根因 #

当前出现双重滚动条是两个问题叠加导致的：

• 模态最外层组件存在CSS语法错误，部分规则未被浏览器解析，容器被内部150vh的内容撑出视口范围，触发全局根节点的纵向滚动
• 未在模态打开时锁定全局页面的滚动状态，根节点始终允许溢出滚动

具体修改 #

1. 修正styled组件的样式问题 #

export const TodoMain = styles.section`
  width: 100%;
  /* 修复原代码缺少冒号的语法错误 */
  min-height: 100vh;
  /* 显式锁死容器高度为视口高度，避免被内部内容撑高 */
  height: 100vh;

  overflow-x: hidden;
  /* 保留容器自身的纵向滚动能力，承接内部溢出内容 */
  overflow-y: auto;

  background: white;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
`;

export const Todo = styles.div`
  width: 80%;
  min-height: 150vh;
  margin: auto;
  border: 3px solid black;
`;

这里显式设置height: 100vh的作用是：即便内部子元素高度超过视口，模态外层容器的高度也会严格和视口等高，溢出内容只会在容器内部触发滚动，不会撑大外层容器的尺寸。

2. 模态打开时动态锁定全局滚动 #

全局滚动条的核心来源是文档根节点body的溢出滚动未被禁用，需要在模态组件的生命周期里动态控制：
在你的模态业务组件中加入副作用逻辑：

import { useEffect } from 'react';
import { TodoMain, Todo } from './你的样式文件路径';

const TodoModal = () => {
  useEffect(() => {
    // 记录模态打开前的body原始overflow样式
    const originalOverflow = document.body.style.overflow;
    // 锁定全局滚动，禁止出现多余的全局滚动条
    document.body.style.overflow = 'hidden';

    // 模态关闭/组件卸载时还原原始滚动样式
    return () => {
      document.body.style.overflow = originalOverflow;
    }
  }, []);

  return (
    <TodoMain>
      <Todo>
        {/* 模态业务内容 */}
      </Todo>
    </TodoMain>
  )
}

最终效果 #

• 全局页面无多余滚动条，非模态状态下的页面滚动能力不受影响
• 模态容器自身的专属滚动条正常工作，承接所有内部溢出内容的滚动交互

注意：禁止在全局CSS中永久写死body { overflow: hidden }，否则会导致普通浏览场景下页面完全无法滚动。

内容的提问来源于stack exchange，提问作者Diego Davincci