CODEWITHSUNDEEP
javascripthtmlcssreactjsstyled-components
jiyoon
jiyoon

Reputation: 231

Scroll 100vh within a div?

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

Upvotes: 0

Views: 2146

Answers (1)

Anadkat Bhavik
Anadkat Bhavik

Reputation: 111

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!

Upvotes: 1

Related Questions