DEV Community


[CSS] Scroll snap example

Cornea Florin
Experienced Web Developer with a demonstrated history of working with PHP, HTML, CSS, JS and many more
・1 min read

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 class="page-two">
    <p>A bit more</p>
  <section class="page-three">
    <p>And more</p>
  <section class="page-four">
    <p>Now scroll up</p>
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

Discussion (0)