实现类Facebook注册表单滚动效果：仅让红色Wrapper组件滚动而非整个页面

我明白你想要实现的效果——打开注册表单时，页面背景固定不动，只有红色遮罩层（Wrapper）区域可以滚动，这和Facebook注册表单的交互一致。我们可以通过两步关键修改来实现：

1. 禁止页面背景滚动 #

当注册组件显示时，需要把页面body的滚动锁定，这样背景内容就不会跟着滚动。我们可以用useEffect钩子来监听注册组件的显示状态，动态修改body的样式：

import { useEffect } from 'react';

const Register = ({ setRegisterView, registerView }) => {
  useEffect(() => {
    // 显示注册表单时，禁用body滚动
    if (registerView) {
      document.body.style.overflow = 'hidden';
    } else {
      // 关闭时恢复默认滚动
      document.body.style.overflow = '';
    }

    // 组件卸载时也要恢复，避免影响其他页面
    return () => {
      document.body.style.overflow = '';
    };
  }, [registerView]);

  // ... 你的组件返回内容
};

2. 修改Wrapper和Form的样式，让遮罩层成为可滚动容器 #

你当前的Wrapper样式需要调整几个关键属性，让它变成一个可以独立滚动的容器，同时保持表单居中：

const Wrapper = styled.div`
  min-height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed; /* 改成fixed，确保遮罩层始终覆盖当前视口 */
  z-index: 999999;
  display: flex;
  justify-content: center;
  padding: 30px 0;
  overflow-y: auto; /* 垂直方向内容超出时显示滚动条 */
  align-items: flex-start; /* 取消默认的拉伸，让表单保持自身高度 */
`;

const Form = styled.form`
  background-color: white;
  padding: 50px 80px;
  position: relative;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10px;
  max-width: 400px; /* 限制表单最大宽度，适配大屏幕 */
  margin-top: 20px; /* 顶部留间距，避免表单贴顶 */
`;

关键修改解释： #

• position: fixed：让遮罩层固定在视口内，不会随着页面滚动而移动，确保始终覆盖用户看到的区域。
• overflow-y: auto：当表单高度超过视口高度时，遮罩层会自动显示垂直滚动条，用户可以滚动查看完整表单。
• align-items: flex-start：默认flex布局会让子元素（Form）拉伸到和容器一样高，改成flex-start后，Form保持自身高度，只有当Form高度超过Wrapper的视口高度时，Wrapper才会出现滚动条。
• 给Form添加max-width：避免在超大屏幕上表单过宽，保持视觉舒适。

修改后的完整组件代码 #

import { useEffect } from 'react';
import styled from 'styled-components';
import { IoMdClose } from 'react-icons/io';
import Checkbox from './your-checkbox-component-path'; // 替换成你的Checkbox组件路径
import logo from './your-logo-path'; // 替换成你的logo路径

const Wrapper = styled.div`
  min-height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 999999;
  display: flex;
  justify-content: center;
  padding: 30px 0;
  overflow-y: auto;
  align-items: flex-start;
`;

const Form = styled.form`
  background-color: white;
  padding: 50px 80px;
  position: relative;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10px;
  max-width: 400px;
  margin-top: 20px;
`;

const StyledInput = styled.input`
  padding: 10px 12px;
  display: block;
  border: 1px solid ${({ error }) => (error ? "red" : "#d6d6d6")};
  outline: none;
  width: 250px;
  :focus {
    border: 1px solid #00b4ff;
    color: #00b4ff;
  }
`;

const LoginButton = styled.button`
  background-color: ${({ facebook }) => (facebook ? "#4c69ba" : "#191919")};
  color: white;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  border: 0;
  display: block;
  :hover {
    opacity: 0.9;
  }
  :last-child {
    margin-top: 10px;
  }
`;

const Logo = styled.img`
  width: 150px;
  height: 22px;
`;

const LogoHolder = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
`;

const FieldType = styled.div`
  font-size: 13px;
  padding-bottom: 2px;
  margin-top: 15px;
`;

const CLose = styled(IoMdClose)`
  right: 10px;
  top: 10px;
  cursor: pointer;
  position: absolute;
  color: #191919;
  :hover {
    color: #00b4ff;
  }
`;

const StyledCheckbox = styled(Checkbox)`
  margin: 15px 0;
`;

const Error = styled.div`
  font-size: 11px;
  color: red;
  margin-top: ${({ statute }) => (statute ? "-10px" : "3px")};
  margin-bottom: ${({ statute }) => (statute ? "15px" : "0")};
  width: 250px;
`;

const Register = ({ setRegisterView, registerView }) => {
  useEffect(() => {
    if (registerView) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }

    return () => {
      document.body.style.overflow = '';
    };
  }, [registerView]);

  return (
    <Wrapper>
      <Form>
        <CLose onClick={() => setRegisterView(false)} />
        <LogoHolder>
          <Logo src={logo} />
        </LogoHolder>
        <FieldType>First Name</FieldType>
        <StyledInput name="first_name" type="text" />
        <FieldType>Last Name</FieldType>
        <StyledInput name="last_name" type="text" />
        <FieldType>City</FieldType>
        <StyledInput name="city" type="text" />
        <FieldType>Email</FieldType>
        <StyledInput name="email" type="email" />
        <FieldType>Password</FieldType>
        <StyledInput name="password" type="password" />
        <FieldType>Repeat password</FieldType>
        <StyledInput name="repeated_password" type="password" />
        <StyledCheckbox text="Accept statute." />
        <LoginButton type="submit">SIGN UP</LoginButton>
        <LoginButton facebook>LOGIN WITH FACEBOOK</LoginButton>
      </Form>
    </Wrapper>
  );
};

export default Register;

这样修改后，当你打开注册表单时：

• 页面背景会被锁定，无法滚动
• 遮罩层（Wrapper）会在表单高度超过视口时显示滚动条，用户可以滚动查看完整表单
• 表单在大屏幕上会居中显示，且有最大宽度限制，保持美观

内容的提问来源于stack exchange，提问作者some nooby questions