Прокрутить 100vh внутри div?

Question

Я пытаюсь сделать кнопку, которая прокручивает вниз 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);
  }

Answer 1

обратите внимание, что вы поддерживаете высоту div до 100vh, а также прокручиваете для того же! высота div равна 100vh, что соответствует высоте экрана браузера, поэтому область прокрутки не будет отображаться, поэтому дело в том, что вы пытаетесь прокрутить элемент div, в котором нет содержимого, превышающего высоту экрана ...

Если вы хотите попробовать, вы можете попробовать, установив height: 110vh; содержимого, а затем прокрутив window.innerHeight, который будет иметь некоторое содержимое для прокрутки, поэтому он будет прокручиваться!

Я надеюсь, что это будет помочь вам!

спасибо! Продолжайте кодировать!