I'm trying to achieve scroll snap, what am I doing wrong?

47 Views Asked by delzanoy At 11 May 2020 at 02:06

I'm trying to achieve scroll snap using CSS. Splash, page1, page2 is how I want my HTML to snap. My CSS doesn't seem to snap, what am I doing wrong?

body{
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.splash{
  scroll-snap-align: start;
  width: 100vw;
  height: 100vh;
}
.page1{
  scroll-snap-align: start;
  width: 100vw;
  height: 100vh;
}
.page2{
  scroll-snap-align: start;
  width: 100vw;
  height: 100vh;
}

<body>
  <section class="splash"></section>
  <section class="page1"></section>
  <section class="page2"></section>
</body>

Original Q&A

There are 1 best solutions below

ROOT On 11 May 2020 at 03:06

You are close, the only thing you have to add is a wrapping container with full height of the view-port and also set each section to full height of the view-port:

body{
  height: 100vh;
  overflow: hidden;
}

.container {
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

.page1{
  background-color: red
}

.splash {
  background-color: green
}
.page2 {
  background-color: blue
}

<body>
  <div class="container">
    <section class="splash">splash</section>
    <section class="page1">page1</section>
    <section class="page2">page2</section>
  </div>
</body>

I'm trying to achieve scroll snap, what am I doing wrong?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HASKELL-SNAP-FRAMEWORK

Trending Questions

Popular # Hahtags

Popular Questions