CSS Scroll Snap

Learn how to control scroll snapping for you web galleries with the CSS scroll-snap property. Scroll snap is relatively new and makes the animation and transition between slides much smoother for gallery or card like content transitions.
💖 SUBSCRIBE (Please) 💖
kzbin.info?s...
Live Scrimba Code: scrimba.com/scrim/coe9643ac9e...
🙏 Become a Patron for support! 🙏
/ followandrew
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #webdev #tutorial

[@hasansolak23]

For those who have struggled to make the code work... I realized that I forgot to set the container's height to its child height. For example, each of my child elements has a height of 100vh, I set the container's height to 100vh and it worked...

[@nathanlove4449]

Thanks!

[@alan_johnson_]

you are the man, not even chatgpt can find whats wrong with it

[@AleySoundz]

Thank you! This works perfect for what I need.

[@AnsolasDe]

Is there a way tincrese the delay for teh snapping ? scoll snap time ? It feels ages when the snaps kicks in

[@metron2590]

this does not work for me for some reason, the scroll snap just doesnt work

[@fadiajami5588]

add the overflow:auto; property and it works

[@mendistudio]

Very simple and effective tutorial thanks. So after scrolling the scroll-area through you can continue scrolling the other elements below right? I thought this was done with gsap or similar.

[@FollowAndrew]

Yep, that's correct. Super smooth animations too for the scrolling, as it's done in CSS and can be accelerated on the GPU.

[@lerabykova1362]

How to actually make a different look af that scroll bar on the side, different thickness and colour, add/remove arrows? Thank you

[@vm9010]

Hi! Great tutorial. I have an issue - when the snap occurs it skips 1 section between (it jumps from section 1 to 3). Any idea why? Thank you in advance.

[@joamarticorena9018]

I am having the same problem, how did you solve it?

[@nilachol4]

when I scroll(in google chrome), it jumps two slides at a time :(

[@badcatdesign]

@2:12 cannot see the properties dropdown in the YT vid - something's not playing nice with the scriba recording.

[@FollowAndrew]

Yeah, I noticed this in post as well. Not sure why the playback doesn't show that.. I've come across a time or two when the live preview doesn't show properly on playback as well..

[@tuyu6404]

Why this is not work on my Case,😢 btw on my Case i use grid to the container. Please explain to me.

[@ralkey]

my scroll snapping overshoots from the 1st to the 3rd and also the other way. (i only have 3 alement to snap to) why does this happen and how do i fix it?

[@aryancoderc4142]

same here, did you find any solution?

[@ralkey]

@@aryancoderc4142 nope. i saw on stack overflow that its probably a problem with my google chrome version. so i updated it but it didnt fix it.

[@aryancoderc4142]

@@ralkey mine is the last version too but it doesn't work, I tried on my laptop it works but not on pc with 28inch monitor, but it works perfectly on firefox

[@danielluizpereira6403]

nice

[@tahirbalci]

I tried to add this scroll-snap to elementor custom css. It works in editor. but it doesn't work in preview and active page. Why?

[@WTPleo]

Have you figured it out?

[@tahirbalci]

@@WTPleo i tried another way. if you want i can share it with you.

[@WTPleo]

@@tahirbalci yes please

[@dharnilm]

your screen recording has not captured the drop down list .

[@MajdYafi]

Says I need permission to view the code in Scrimba

[@FollowAndrew]

Think I've got that link fixed, try again now?

[@Dexter101x]

The sound kept cutting out

[@SomeRandomPiggo]

didnt for me, think its a client side issue

[@Ctrl_Alt_Elite]

@@SomeRandomPiggo lol it's a video editing blunder, happened a couple times towards the end of the vid

[@ivanazirojevic3544]

Not a really nice tutorial to be honest, it could have been a bit broader and a bit more creative... give us a nicer example so we can see how flexible the property actually is and what can be achieved with it... this gave me as much info as the first thing that pops up when you google 'scroll-snap-type'. also the sound switching off at some points is strange.

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE

[@gggabrielelel]

is it gonna take long? how soon is it?