Okay, so today I tried to make some elements on a webpage “snap” into place while scrolling. You know, like when you scroll and the section you’re looking at kind of clicks into the center of the screen? I thought it would be cool, so I gave it a shot.
Getting Started
First, I needed a basic webpage. Nothing fancy, just a few sections with different background colors so I could easily see what was going on. I just threw together some simple HTML and CSS, making each section fill the entire viewport height. That way, I could have something to, uh, snap with.
The First Attempt
I remembered seeing something about `scroll-snap-type` in CSS. So I went straight for that. I added `scroll-snap-type: y mandatory;` to the container holding all my sections. This basically tells the browser, “Hey, I want vertical snapping, and I really mean it!”
Then, on each individual section, I put `scroll-snap-align: center;`. I was going for that centered look, you see. The idea is that each section should snap to the center of the viewport.
Running into a snag…
I fired it up, and… it kinda worked. It was snapping, alright, but it was super janky. Like, really rough. It wasn’t smooth at all. It felt like it was fighting me as I scrolled. I was a little bummed, not gonna lie.
Back to the Drawing Board (aka, the Internet)
So, I spent some time Googling, reading through articles and, forum. I tried a bunch of different things. I messed with the `scroll-snap-stop` property, thinking maybe that would help. No dice.
Then, I set `scroll-padding`, but I think the problem is my setting about `scroll-snap-align`, maybe I should try to set it to `start`
Tweaking, Tweaking, Tweaking
I went back to my CSS, with a little bit despair, and set `scroll-snap-align: start;` on my sections. Now my section would stop at the begin, this is what I want!
That’s all
I am a beginner, and this just cost my whole day. Maybe there’s something I still do not know, but I think I should keep learning and practicing, I hope I could get improved next time!
