在一个格内滚动100vh?

问题描述 投票:0回答:1

我正在尝试创建一个在单击时向下滚动100vh(一个窗口高度)的按钮。我将其固定为30vh的宽度,滚动部分为右侧的70%。我想知道为什么当我使用window.scrollBy时我的代码什么都不做?

HTML:

<Content> 
  <Intro />
  <TypewriterSpace>
    <Typewriter />
    <Button onClick={this.handleClick}>View my work</Button>
  </TypewriterSpace>
</Content>

CSS:

let TypewriterSpace = styled.div`
  margin-left: 6rem;
  margin-right: 20rem;
  margin-top: -1rem;
  position: relative;
`

let Content = styled.div`
  height: 100vh;
  width: 70vw;
  display: flex;
  flex-direction: column;
  float: right;
  overflow: auto;
`

const Button = styled.button`
  font-family: "Avenir";
  height: 3em;
  width: 10em;
  color: white;
  border: 2px solid white;
  background: #1d1d20;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  position: absolute;
  transition: 0.5s;
  margin-top: 4em;
  left: 35%;
  margin-top: 60vh;

  &:hover{
    color: #1d1d20;
    border: 2px #1d1d20;
    background: white;
  }
`;

我的handeClick功能:

  handleClick(e) {
    let pageHeight = window.innerHeight;
    window.scrollBy(0, pageHeight);
  }
javascript html css reactjs styled-components
1个回答
0
投票

注意,您将div高度保持为100vh,并且也要滚动相同的高度!由于div高度是100vh,等于浏览器屏幕的高度,因此不会有滚动范围,因此,关键是您试图在div中滚动,该div除了屏幕高度外没有其他内容...

如果您想尝试,可以通过设置内容的height: 110vh;然后滚动window.innerHeight来尝试,其中将滚动一些内容,以便滚动!

我希望这会对您有所帮助!

谢谢!继续编码!

© www.soinside.com 2019 - 2024. All rights reserved.