CODEWITHSUNDEEP
javascripthtmlcssscroll-snapscroll-snap-type
UrTech Tips
UrTech Tips

Reputation: 69

Scroll-snapping Dosent work when i have scroll-snap-type: y; on body tag

So I'm interested in scroll-snapping. I tried to play with it a little bit but it did not work. I tried it in chrome and firefox and both are unsuccessful. here is my code please help.

* {
  margin: 0;
  padding: 0;
}

body {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-snap-points-y: repeat(100vh);
}

header {
  height: 100vh;
  width: 100%;
  background: #ff0000;
  scroll-snap-align: start;
}

div {
  height: 100vh;
  width: 100%;
  background: blue;
  scroll-snap-align: start;
}

section {
  height: 100vh;
  width: 100%;
  background: yellow;
  scroll-snap-align: start;
}
<body>
  <header>
    <h1>
      Header
    </h1>
  </header>
  <div>
    <h1>
      Div
    </h1>
  </div>
  <section>
    <h1>
      Section
    </h1>
  </section>
</body>

Upvotes: 0

Views: 1131

Answers (1)

Robyn
Robyn

Reputation: 161

I'd try to make sure all elements inside the scroll-snap are the same, ie <div>[lots of other divs]</div>, alternatively, try not to use the body as a wrapper and see if that helps.

Here is a doc with better explanation

Edit: I tested it out and the size of the wrapper needs to be the same size as its children, you can disregard the rest of the stuff I said but I still wouldn't suggest using the body as a wrapper next time.

Upvotes: 1

Related Questions