How to make screen snap to section?

Code Help HTML/CSS/JS
1

Question:
I’d like the website to snap to the next section when the user scrolls. How would this be possible?
Repl link:
The Site
The Code

2

Hey @RedCoder!

What do you mean by snap to the next section?

3

I’d suggest scroll-snap-type - CSS: Cascading Style Sheets | MDN <— that is exactly what you’re looking for.

3 Likes
4

When I insert the scroll-snap-type into my two sections, nothing happens. Am I missing something?

5

Uh, are you sure you added it?

6 
section.p1 {
  scroll-snap-type: y mandatory; /* <---- */
  display: flexbox;
  color: white;
  height: 100vh;
  background: rgb(255, 255, 255);
  background: linear-gradient(13deg, rgba(0,232,255,1) 0%, rgba(146,36,255,1) 57%, rgba(64,0,255,1) 100%);
  background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
}

...

section.p2 {
  scroll-snap-type: y mandatory; /* <---- */
  display: flexbox;
  color: black;
  height: 100vh;
}
7

Hi, you need to set the scroll-snap-type to the parent of the sections.

Something like this:

<div id="sections">
    <section class="p1 center">
        ...
    </section>
    <section class="p2 center">
        ...
    </section>
</div>

#sections {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

section {
  scroll-snap-align: center;
}
8

The second I added overflow: auto;, certain items begin to disappear from the user’s view.

9

I tested my changes on a fork, and they worked. so I don’t know what you’re doing differently.

1 Like