DEV Community

Cornea Florin
Cornea Florin

Posted on

2 1

[CSS] Scroll snap example

Scroll snap example for presentation websites

Let's start with a simple HTML structure:

<div class="section-wrapper">
  <section class="page-one">
    <p>Scroll dowb just a little bit</p>
  </section>
  <section class="page-two">
    <p>A bit more</p>
  </section>
  <section class="page-three">
    <p>And more</p>
  </section>
  <section class="page-four">
    <p>Now scroll up</p>
  </section>
</div>
Enter fullscreen mode Exit fullscreen mode

Now for the css scroll snap part:


.section-wrapper {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: auto;
}

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

Enter fullscreen mode Exit fullscreen mode

We need to add `scroll-snap-align` with the individual sections and the `scroll-snap-type` to the element that contains all the sections

Looking forward to see other examples that you might have

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more