Up next in 10
Learn CSS Scroll Snap In 6 Minutes
4K views
Feb 7, 2024
Immerse yourself in the world of streamlined web design with this quick and informative tutorial on "Learning CSS Scroll Snap in 6 Minutes." In this video, you'll grasp the essentials of CSS Scroll Snap, a powerful feature that enhances user experience by providing a smooth and controlled scrolling mechanism. The tutorial takes you through the implementation of scroll snapping for captivating sections, ensuring a visually pleasing and user-friendly navigation experience. Whether you're a developer looking to add a polished touch to your web projects or a CSS enthusiast eager to explore advanced styling techniques, this concise guide offers a swift and comprehensive walkthrough. Join this tutorial to master CSS Scroll Snap in just 6 minutes, and unlock the potential of creating seamlessly scrolling websites that captivate and engage users.
View Video Transcript
0:00
Have you ever wanted to build a website like this, where every time that you scroll it
0:03
jumps to the next section of the page? Well, with CSS Scrollsnap, this is incredibly easy to do
0:09
In this video, I'm going to teach you everything you need to know about CSS Scrollsnap, so
0:13
you can build a website just like this by the end of this video
0:19
Welcome back to Web Dev Simplified. My name is Kyle, and my job is to simplify the web for you, so you can start building
0:24
your dream projects sooner. In this video, I'm going to show you how to take this page, where if you just scroll
0:28
and just scroll, and scroll, and scroll, and change it to what you saw at the very beginning of the video, where it snaps around, and teach you everything you need to know
0:34
to make it work perfectly for your own site. To get started, I have a few things in my HTML
0:39
I have this div here, which contains five individual sections, and each section has
0:42
an h2, which has the title of the page, and then some text. As you can see, we have page one, two, three, four, and five
0:49
Really straightforward stuff here. Also, I have this nav, which is currently hidden by our CSS, but that's going to come
0:54
into play a little bit later because we have some interesting things with how to deal with fixed position navs
0:59
If I make this so it's actually displayed, you can see we have this nav that shows up
1:02
over the top of our content, and we need to take that into account when we deal with scroll snapping
1:07
For now, we're going to completely remove that because I want to talk about the basics of scroll snapping
1:11
Essentially, there's two things you need to understand. First, what is the container that you're going to be scrolling inside of
1:16
Then, secondly, is going to be the actual scrolling elements themselves. In our case, our scrolling element is just the entire page, which is why we have this
1:24
HTML selector here, which is where we specify that we want to use scroll snapping
1:28
We can come in here, and we can say scroll-snap- and we want to specify the type that we're
1:34
going to be using. As you can see, there's three options. There's mandatory, none, and proximity
1:39
None is just the default. There's no scroll snapping. If you use mandatory, it means you are always going to snap to the next section every time
1:45
you scroll, and proximity is just going to make it so that if you're close to the boundary
1:49
like for example, I'm right here, it'll scroll me down to actually fit that page perfectly
1:53
within my viewport. Now, you're going to notice if I save, this actually doesn't do anything
1:57
You'll notice that I'm not having any scroll snapping. Even if I change this to mandatory and I scroll, you see it's still not doing anything, and
2:03
that's because of a few things. One, I still need to specify how I want to scroll-snap to, like what I want to snap to
2:08
Secondly, I actually need to specify the direction I want to snap to, because this scroll-snap
2:13
type actually takes two things, and one of them is going to be the direction. We have X if we want to do horizontal scrolling, we have Y if we want to do vertical scrolling
2:21
and then we have both if we want to snap in both directions. Also, if you're familiar with the logical properties in CSS, we also can use block and
2:28
inline to snap to the block and inline directions, which are going to work very similarly to
2:33
X and Y. If you're unfamiliar with these logical separators inside of CSS, I have a full video covering
2:38
this topic. I'll link it in the cards and description for you. For our case, we're just going to do Y because we're scrolling in the Y direction, and if
2:45
I save, you'll see, like I said, it's still not working. That's because we need to tell it what we want to snap to
2:50
If we go to our HTML, you can see we have all of these sections inside of our HTML tag
2:54
and I want to snap to my sections. On this section, I can come in here and I can specify a scroll-snap align, and I just
3:01
say what do I want to align to. In our case, I'm going to say that I want to align to this start
3:06
We have start, we have center, and we have end. In our case, I want to scroll to the start of the section
3:13
If I click save, you'll now notice whenever I scroll, I'm just clicking scroll one time
3:17
and it's jumping me to the next section. Same thing here, if I use my scroll bar, let go, it's going to jump to the closest section
3:22
If I scroll down, it jumps me to the next section. Scroll up, it jumps me to the next section
3:26
That's because we're using mandatory. If we change this instead to be proximity, you'll now see that I can scroll and it's
3:33
going to work just fine. If I stop scrolling nearby the page, you saw that it jumped me down to the page
3:37
If I scroll here and stop, you can see it jumps me up to the closest thing
3:41
As long as it's close, that proximity is going to jump you up or down in that direction
3:45
For our style of site, mandatory makes more sense because we want to jump to each individual
3:49
page every time we scroll. As you can see, this kind of works exactly like we want it to
3:53
We're jumping to each one of those pages. If you have a really simple scrolling scenario for scroll snapping, this is all you need
3:59
You just need the type and you need the alignment. There's a few other things I want to talk about though for some extra features
4:05
We have one other thing that we can specify on the actual section, and that is going to
4:08
be the scroll, snap, stop. This has just two options. We have always and we have normal
4:14
By default, it's set to normal. That just means if you do a really big scroll, for example, it's just going to end you on
4:20
whatever page you stop on. This is really important on a mobile device because if you're on your phone, for example
4:26
and you just do this on your phone where you're scrolling up really, really fast or scrolling
4:29
down really, really fast, it's going to jump past a bunch of pages. Wherever your scroll stops at, that's the one that it's going to stop at for your scroll snapping
4:37
The alternative is the always flag. This means if you're on a phone and you do a really, really big scroll, instead of skipping
4:43
past a bunch of things, it's actually going to stop on the very next page
4:47
I can't emulate this on a desktop because I don't have the same type of scrolling functionality
4:51
you have on a phone, but like I mentioned, if you put your finger on your phone and you scroll up really, really fast, it'll jump past the pages until you get to the one where
4:58
it slows down your scrolling and stops on. Depending on what you want, you may change this around
5:03
In our case, I'm just going to leave this as the default and get rid of it. The other thing to worry about is going to be what happens if you have some type of element
5:09
over top of your page. For example, here I have this nav bar that covers up the top portion of my page
5:14
You notice when I scroll snap, it's actually covering the top part of my page and that really isn't a very good look
5:18
I don't like how this looks. I want to be able to change this. The easiest way to change this is with padding or margin
5:24
You can specify those either on each individual section or as an overall padding or margin
5:28
for the entire thing. If you want to specify one value that every single thing is going to abide by, you can
5:33
do that inside of the parent. We can come in here and we can say we're going to have some scroll padding
5:38
As you can see, we have all of our different normal padding options. I'm going to set this to 30 pixels because that's how tall my nav bar is
5:44
Now if I save, you notice every single page is moved down by 30 pixels
5:49
You can see this if I hide my nav bar again. You can see it's just moved down 30 pixels from the very top
5:53
Pretty straightforward stuff that's going on here. That's just because I put the padding of 30 pixels on the top
5:58
I can do the exact same thing by removing this and putting this down here and changing
6:02
it to a margin. Now I'm saying each section has a 30 pixel margin on the top
6:07
You can see I get the exact same result where I have that padding on the top. Now if I put this back here, you can see that everything is working perfectly with my heading
6:14
because it's exactly 30 pixels of space. That's all there is to scroll snapping
6:19
If you enjoyed this video, I want to check out some more advanced CSS features. I highly recommend checking out my full CSS course
6:25
It covers everything you need to know about CSS starting with the absolute basics and
6:29
going to more advanced concepts like this. I'm going to have it linked down in the description below if you're interested
6:33
I highly recommend you check it out. With that said, thank you very much for watching and have a good day