Learn CSS Scroll Snap In 6 Minutes

Learn CSS Today Course: courses.webdevsimplified.com/...
Scroll snapping is a feature many websites take advantage of and it used to be quite difficult to implement before CSS released scroll snapping properties. In this video I will cover everything you need to know about scroll snapping in CSS so you can utilize it in all your sites.
📚 Materials/References:
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS Logical Properties Video: • Yet Another 5 Must Kno...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:25 - Setup
01:10 - Scroll Snap Basics
04:02 - Scroll Snap Advanced Features
#WebDevelopment #WDS #JavaScript

[@cafelutsa_]

If I remember correctly, you can emulate touch controls inside the devtools by choosing a device from the dropdown (be it tablet or phone)

[@alan_johnson_]

Ctrl shift m in firefox

[@abdulahadqureshi1104]

Thanks for the great tutorial. I first got to know about scroll-snapping from Kevin Powell, but getting a shorter, dedicated video from you just feels great especially for new learners. Keep up the great content!

[@socrates6511]

No one asked

[@olatunjikayode5979]

@ kenneth Joshua Becaro You're a pathetic being

[@piersStreet]

Same

[@nickwoodward819]

@@socrates6511 pretty sure content creators ask for engagement and feedback all the time champ. that and no one needs to ask. HTH.

[@luczztem]

bro yesterday I was for hours trying to remember a video that was about scroll snapping and then today you lauch this video.... amazing

[@michielarkema]

Hey Kyle, this video was really good. It's always seeing good someone put some love into CSS :)

[@salmanpatrick]

Thanks for letting us know. Vital info. Keep up the good work mate

[@mdfm28]

CSS is really powerful nowdays. I was gaonna write my snapping js code like old time but decide to google just to make sure. I glad stumble into this video, save my 2 hours writing the code. Thanks.

[@thermicrocket4052]

I love your videos. Can you do one on actually hosting a webpage. Like what the best options are. What you use. How to push code to it / use source control.

[@kristijanlazarev]

Soooooo coool!! Just really wanted to see the other properties you set so I could get the same result as you. Still is amazing and simple!

[@rustee_nyfe]

Cool and simple effect. Thanks

[@cachemoney8825]

This was great CSS content, can you make a video on the opposite effect where is an "infinite" scroll or glide-like effect ? Thanks again!!!

[@rameenana]

Thanks man. This was useful.

[@SlickStatus]

Very helpful Thanks Brother 👍👍👍

[@jtkyber]

Nice video man. Had no idea this existed

[@plop_dev]

i've been wondering how to do this for such a long time thanks

[@imadmachi3227]

I loved this video. Keep it up

[@keenoogodlike]

Nice content, that's make my day a lot easier.

[@khalilbenmeziane8836]

good to see you again kyle thank you a lot

[@joabsonno]

Thanks, this video help me in my problem.

[@rahimco-su3sc]

your videos are amazing !!

[@andreask.291]

Superb! 🤩 Could U plz show how to build a side-snapping version? Would be great. 😉

[@Diwakar-pd4kp]

Thankyou, it's amazing 🤯

[@webwisesagar]

Thanks Kyle, it seems useful.

[@sasagasparovic9351]

thank you, this is very usefull

[@rahulnag9582]

Wow nice, thanks for sharing this info

[@m0kser]

Oh My God… It was so simple. I’ve lost entire week to develop this effect with a JS.. 😮😢

[@NOTHING-en2ue]

Very useful thanks a lot

[@theisoj]

Thanks Kyle as always 👍

[@amirkishk]

very nice video, thanks.

[@FromEternity]

Bro... you are a life saver

[@atleast_me]

You are one of the most talented developers I have seen. React, Next, and Css as well, Cool.

[@jam4l]

This is great thanks

[@rakhisingh9797]

It's just two lines of code amazing 🎉🎉

[@-hero-5882]

Thank you Kyle ❤

[@Neckhawker]

Thanks, I finally understand it. MDN doc isn't really clear about it.

[@lucienchu9649]

Interesting, thanks

[@PhilDiasPJD]

Simple!!! Thanks

[@anyaforget8402]

your videos helps me a lot 😇😇😇

[@felipeleon6631]

great videoo!! very useful

[@nayemalifahim6701]

Make Responsive Product Slider using css scroll Snap.

[@nidhalbettaibi488]

Waiting for more advanced CSS !

[@74mada]

Thank a lot, dude.

[@JeanDidier]

This seems like a simple thing but in a portfolio will likely grab attention to a potential recruiter

[@abdullahsoomro6238]

Thanks a lot.

[@oyebunmi5413]

Great video 👍. I was looking for something like this and I wasn't getting good results in my search as I couldn't describe the feature properly. I was worried i'd have to use some package. Thanks bro.

[@salvo668]

Man... THANK YOU!

[@giorgiberdzenishvili4115]

მადლობა როგორც ყოველთვის საინტერესო და სასარგებლო. Thanks as always interesting and useful

[@risingrave3549]

Thanks!

[@etiennez0r846]

really awesome vid ❤

[@heavylog1c]

I remember how I did the same with JS, it took me like a week to fix bugs. And now it’s that simple.

[@Govjobcracker]

You are the #PRO in css and explanation also🎉🎉🎉🎉❤❤

[@YuriiKratser]

Who cares about css?

[@revelcw]

@@YuriiKratser The entirety of the internet.

[@YuriiKratser]

@@revelcw I won’t buy it.

[@PROGAMER-jl7kk]

Thank you I understand 😊

[@gamermonster8909]

😂👉 kzbin.info/www/bejne/iZK5eal5qNSCapI

[@MdNaimurRahmanHera]

Wow that's a new thing I learned

[@ssk7690]

amazing!

[@Ilioski17]

ty

[@user-fm1yy5xz3p]

Welcome back, king!

[@JuanPortalG]

You just made my portfolio 10 times better! Thanks, man Is there a way to make it scroll a little slower? I tried with "scroll-behavior: smooth" but nothing changed

[@lukas.webdev]

No, for that you would need javascript..

[@sojuthomas7727]

Nice Kyle, always wonder how KZbin did this on its reel

[@nayemalifahim6701]

its so usefull

[@godhandinfamous]

lol I thought you are gone from YT, welcome back!

[@omomer3506]

Nope he said i will decrease frequency of the number of videosni post in a week by 1 until i am done with the react course

[@Sameer.Trivedi]

I was using some hacky javascript to achieve this until now, thanks for the vid!

[@Krotedev]

Perfect!

[@Modded]

Can you address the last and how it will continue scrolling past that pushing the top of the section behind the nav?

[@lukas.webdev]

I just posted a new youtube video ("Top 10 CSS Features You Should Know & Use in 2023") and obviously CSS Scroll Snap was in it... It's a really awesome CSS Feature! 👍🔥

[@RAVISHARMA-hk5ll]

wonderful explanation , congratulation, you are awesome, you are from which country ?

[@shahfaisal3923]

Amazing

[@smith4591]

I never thought implementing snap scroll this easy

[@rohittomar4187]

Please make a video to style scrollbar while the dialog modal is open.

[@saifalkhateeb351]

Thanks for the tutorial, Can I disable this for one section becaue I have a high of some section more than 100hv

[@sujoykrhaldar]

Is is possible to slowdown the speed or smoothness via css ?

[@Holy_Frijole]

This should make jump link alignment much easier right?

[@channel6k]

Love u bro ❤️❤️❤️

[@strgaltphil]

I got a question regarding the compatibility of mobile browsers (tested on Chrome on iOS, thats beeing only a reskin of Safari). Is there a possibilty to hide the navigation bar on top and the menu bar on bottom when you got scroll snap enabled. I created a snappy full pager with scroll snap and i didn't found a way to archive this beahviour.

[@jithinkumar7985]

Can you add a time parameter to the snap? Like is it a transition that can be speed controlled?

[@lukas.webdev]

not with css, but with javascript... 😉

[@user-lc7qs7gy5d]

3:39 that is really nice , how can add animation delay smoothness

[@D3rAdmin]

Is this also working when all of the sections are targets of anchor links inside the nav bar?

[@sunilnune5681]

Hi do you have any Idea of using MUI in Next Js 13.4?

[@illegalcall]

Can you make the snap scroll a bit longer, its very fast for a desktop

[@CS_HimanshuVishwakarma]

Can you create a video on cart in react with an easy method

[@bloggrammer]

If I remember correctly, web dev simplified is supposed to be on KZbin break

[@lukas.webdev]

No, he just produces less videos, to have more time for his side project... 😉

[@get_video]

Me: I wonder how css scroll snap works? Web Dev Simplified: I know what you are thinking

[@samuraitatin]

Is there a way to make an image carousel using only scroll-snap?

[@user-zn7kx2hi2g]

is there a way to snap smoothly like make it look like it scrolled smoothly or would I need some css or some js I don' t know

[@MrLoLFaQ]

Can't you simulate a touch device with the devtools? It also simulates touch scroll.

[@Avichai997]

wow! one year ago i created this using a lot of js and intersectionObserver. it was a nightmare

[@KIRTIPRIYAMVADATANGIRALA]

THE BEST

[@smartycode]

what about an animation on it like after scrolling has to delay a little bit the go smooth

[@robertbutcher222]

If this would be scroll snap, or partially, how would you have an animation start on snap and as you scroll the animation continues, along with text popping up? What I’m thinking is let’s say a cane for the blind comes up as you scroll, but then as you scroll, turns 90 degrees and scales up. Next to it would be text and as you scroll you would see more of the cane and text, until you reach the bottom of the cane, where the page just scrolls as normal. If anyone might understand what I mean, how would something like this be done?

[@maxcohen13]

How did you get each section to have a different background color? There's no class or ID in the HTML tag, and you never scroll up on your CSS page for us to see how you handled it.

[@Primoris]

He left out a bit of CSS, if you just copy what he has shown in the video it doesn't even work the way its shown.

[@lukas.webdev]

He added a different bg color for each section by adding something like: section:nth-child(1) { ... }; section:nth-child(2) { ...} ...

[@maxcohen13]

@@lukas.webdev I thought that, too. But for that to work, there would at least need to be a class reference to that in the div container.

[@lukas.webdev]

@@maxcohen13 no, I don't think so... he has multiple section html elements and with the nth-child() he targets the first section, than the second section, and so on... you don't need class names for that... A few days ago I posted a video where I also talk about CSS Scroll Snap... Check it out, maybe this helps ... 😉

[@maxcohen13]

@@lukas.webdev I see what you're saying.

[@Slaci-vl2io]

Which browsers have this feature?

[@lucaslannes4004]

are you spying me? just what a needed, thx!

[@VidarrKerr]

Still need js though. That snap is brutal.

[@Beast80K]

Respected sir, I struggle with CSS i can't make these creative stuff in CSS, I know very basic css but can't understand which topics to learn in what order. Any tips you could suggest?

[@tusharbudhiraja4696]

scroll snap property does not work on the safari browser before the 14 version on mac os

[@SolPortillo]

sos lo mas

[@classicaf]

What if my sections are more than 100vh in height? How do I access/read stuff that's below the 100vh?

[@anuvabkumarrit4669]

Have one doubt sometimes a page might have more content that is visible at a time like in your case the content is small, so if there is more content for one particular page, how shall I work then?

[@anuvabkumarrit4669]

Like we have to scroll down to look into the next content in the same page only

[@JasonBurnettsProfile]

I couldn't help but notice that setting the scroll-padding-top and scroll-margin-top performed differently for the first element at one point in your video. At 5:57 you can see that you have not removed the setting for "scroll-padding-top" but the padding is missing. So though it worked when you first set it, you conveniently stopped before the first element in the demo until the end. Then, you scrolled all the way to the first element where the scroll-padding-top was missing (at 5:57) Is this a VSCode glitch that prevented the highlighted property from being applied correctly or is this a strange behavior that we have to account for? Thanks for the great video.

[@chesterxp508]

GoodJob!

[@hoctapit7719]

Can you create 1 course on react js I am very supportive

[@a17waysJackinn]

i wish this snapping function can make it execute once, when you go through, or make a smart detection whether or not execute depends on what you on to to be honest i don't like the function is frustrating. from my experience, just like you can try in instagram explore tab - usually appear that grid of posts, and when you tap again one of any of post, it takes you another page of scrolling for recommending. it's because some posts displaying such a large size, and sometimes like a, I need to get info of that post though button under it, then immediately push me back at the position tho..