在 div 内滚动 100vh？答案

【问题标题】：Scroll 100vh within a div?在 div 内滚动 100vh？
【发布时间】：2020-08-05 01:10:41
【问题描述】：

我正在尝试制作一个在单击时向下滚动 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】：

请注意，您将 div 高度保持在 100vh 并且滚动也是如此！由于 div 高度是 100vh 等于浏览器屏幕高度，所以不会有滚动范围，所以关键是你试图在没有任何内容超过屏幕高度的 div 中滚动......

如果你想尝试，你可以尝试设置height: 110vh; 的内容，然后滚动window.innerHeight，这将有一些内容要滚动，所以它会滚动！

希望对你有帮助！

谢谢！继续编码！

【讨论】：