Javascript 在一个div内滚动100vh？

我试着做一个按钮，点击后向下滚动100vh（一个窗口高度）。我有它，所以30vh的宽度是固定的，滚动部分是右边的70%。我想知道为什么我的代码在我使用

窗口时没有任何作用

HTML:

我的点击功能：

  handleClick(e) {
    let pageHeight = window.innerHeight;
    window.scrollBy(0, pageHeight);
  }

请注意，您正在将div高度保持在100vh，同时也在滚动相同的高度！
由于div高度为100vh，等于浏览器屏幕高度，因此没有滚动范围，
所以，关键是你试图在div中滚动，它没有任何内容超过屏幕高度

如果您想尝试，可以通过设置
height:110vh的内容，然后通过
窗口滚动。innerHeight
将有一些内容可滚动，因此它将滚动

我希望这对你有帮助

谢谢大家!！
继续编码

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

  handleClick(e) {
    let pageHeight = window.innerHeight;
    window.scrollBy(0, pageHeight);
  }