时间戳

首页 > 解决方案 > 注册表格类似于 facebook 一次 CSS

javascript - 注册表格类似于 facebook 一次 CSS

问题描述

我有一个注册组件，其中包含红色包装器和蓝色表单。当您按下导航中的按钮时，它会打开。

问题是我想在打开注册表单时滚动到红色组件上，而不是在整个站点上滚动。因此，当屏幕足够大时，您会看到整个注册表单，但是当您必须使用小屏幕时，您将能够滚动它。当您单击“创建新帐户”时，它应该看起来像 facebook 上的注册表单。

红色的 Wrapper 组件只覆盖了页面的一部分，以便将注册表单放在里面。照片上的黑色边框表示屏幕。

在此处输入图像描述

我的注册组件代码看起来像这样，但我不知道如何在“红色”组件上进行滚动。滚动时，“蓝色”注册表单应保持原位。我怎样才能正确地做到这一点？

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

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;
`;

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 }) => {
  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;

标签： javascriptcssreactjs

解决方案

我知道了！我已将overflow-y: auto,min和添加max height到 Wrapper 组件以及overflow: hidden打开body注册表单的时间。

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

在我添加的表单组件中height:100%。

推荐阅读