Scroll 100vh within a div?

Question

I'm trying to make a button that scrolls down 100vh (one window height) on click. I have it so that 30vh of width is fixed and the scrolling portion is the 70% on the right. I'm wondering why my code doesn't do anything when I use 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;
  }
`;

My handeClick function:

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

Answer 1

notice that you are keeping your div height to 100vh and also scrolling for the same! as div height is 100vh which is equal to the browser screen height, so there ll not be a scope for scroll, so the point is that you trying to scroll in the div which does not have any content more than screen height...

If you want to try you can try to by setting height: 110vh; of the content and then scrollby window.innerHeight which ll have some content to scroll so it ll scroll!

I hope this would help you!

thank you! Keep Coding!