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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

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