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
10 ай бұрын
@@socrates6511 pretty sure content creators ask for engagement and feedback all the time champ. that and no one needs to ask. HTH.
@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.
@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
@mdfri-404
9 күн бұрын
so simple, I like this video. you deserve millions of subs!
@mdfm28
10 ай бұрын
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.
@atleast_me
3 ай бұрын
You are one of the most talented developers I have seen. React, Next, and Css as well, Cool.
@lausianne
Ай бұрын
Very well explained, thank you. I'm happy for you that you find this incredibly easy. Maybe you have an easy solution for this: when the element is larger than the view area, depending on the scroll direction, it snaps to either the start or the end of the element (scrolling from the bottom, the element bottom will be aligned with the viewport bottom). In spite of scroll-snap-align set to start. I would expect it to always snap to start, viewport and element top aligned, and that is what I need.
@michielarkema
Жыл бұрын
Hey Kyle, this video was really good. It's always seeing good someone put some love into CSS :)
@Neckhawker
Жыл бұрын
Thanks, I finally understand it. MDN doc isn't really clear about it.
@rakhisingh9797
Жыл бұрын
It's just two lines of code amazing 🎉🎉
@nayemalifahim6701
Жыл бұрын
Make Responsive Product Slider using css scroll Snap.
@JeanDidier
Жыл бұрын
This seems like a simple thing but in a portfolio will likely grab attention to a potential recruiter
@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.
@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!!!
@m0kser
Жыл бұрын
Oh My God… It was so simple. I’ve lost entire week to develop this effect with a JS.. 😮😢
@nidhalbettaibi488
Жыл бұрын
Waiting for more advanced CSS !
@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.
@sasagasparovic9351
Жыл бұрын
thank you, this is very usefull
@andreask.291
Жыл бұрын
Superb! 🤩 Could U plz show how to build a side-snapping version? Would be great. 😉
@plop_dev
Жыл бұрын
i've been wondering how to do this for such a long time thanks
@webwisesagar
Жыл бұрын
Thanks Kyle, it seems useful.
@salmanpatrick
Жыл бұрын
Thanks for letting us know. Vital info. Keep up the good work mate
@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!
@user-fm1yy5xz3p
Жыл бұрын
Welcome back, king!
@FireFistMot
Жыл бұрын
I loved this video. Keep it up
@rustee_nyfe
Жыл бұрын
Cool and simple effect. Thanks
@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..
@jtkyber
Жыл бұрын
Nice video man. Had no idea this existed
@khalilbenmeziane8836
Жыл бұрын
good to see you again kyle thank you a lot
@keenoogodlike
Жыл бұрын
Nice content, that's make my day a lot easier.
@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! 👍🔥
@joabsonno
Жыл бұрын
Thanks, this video help me in my problem.
@CodeWithRains
4 ай бұрын
3:39 that is really nice , how can add animation delay smoothness
@rameenana
Жыл бұрын
Thanks man. This was useful.
@Sameer.Trivedi
Жыл бұрын
I was using some hacky javascript to achieve this until now, thanks for the vid!
@rahimco-su3sc
Жыл бұрын
your videos are amazing !!
@anyaforget8402
Жыл бұрын
your videos helps me a lot 😇😇😇
@FromEternity
Жыл бұрын
Bro... you are a life saver
@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.
@Modded
11 ай бұрын
Can you address the last and how it will continue scrolling past that pushing the top of the section behind the nav?
@RAVISHARMA-hk5ll
Жыл бұрын
wonderful explanation , congratulation, you are awesome, you are from which country ?
@Emanuel-jr2ii
Жыл бұрын
I find scroll snapping one of the most annoying "features" of a website. It's often not implemented corretly and as a result not favoring the customer experience.
@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.
@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.
@SlickStatus
Жыл бұрын
Very helpful Thanks Brother 👍👍👍
@Diwakar-pd4kp
Жыл бұрын
Thankyou, it's amazing 🤯
@bloggrammer
Жыл бұрын
If I remember correctly, web dev simplified is supposed to be on KZitem 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
@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
@theisoj
Жыл бұрын
Thanks Kyle as always 👍
@rahulnag9582
Жыл бұрын
Wow nice, thanks for sharing this info
@munizrobson5292
5 ай бұрын
Where is the full css for it?
@sojuthomas7727
Жыл бұрын
Nice Kyle, always wonder how KZitem did this on its reel
@PROGAMER-jl7kk
Жыл бұрын
Thank you I understand 😊
@gamermonster8909
Жыл бұрын
😂👉 kzitem.info/news/bejne/tJeMrqp5rKGAZ2U
@rigood4235
Жыл бұрын
I tried this but the nav tag isn't fixed. When I scroll down, nav disappears. Should I give 'position:fixed' to nav?
@tusharbudhiraja4696
Жыл бұрын
scroll snap property does not work on the safari browser before the 14 version on mac os
@amirkishk
Жыл бұрын
very nice video, thanks.
@rohittomar4187
Жыл бұрын
Please make a video to style scrollbar while the dialog modal is open.
@salvo668
11 ай бұрын
Man... THANK YOU!
@smartycode
Жыл бұрын
what about an animation on it like after scrolling has to delay a little bit the go smooth
@risingrave3549
Жыл бұрын
Thanks!
@-hero-5882
Жыл бұрын
Thank you Kyle ❤
@ayushgogna9732
Жыл бұрын
i am really confused if i give the same styles as html to div which is wrapping all the sections it does not work why is that ?
@JasonBurnettsProfile
7 ай бұрын
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.
@Krotedev
Жыл бұрын
Perfect!
@saifalkhateeb351
Жыл бұрын
Thanks for the tutorial, Can I disable this for one section becaue I have a high of some section more than 100hv
@lucienchu9649
Жыл бұрын
Interesting, thanks
@saaika5922
Жыл бұрын
Would that work on mobile as well? I mean VH is pretty bad overall and its mostly creates more issues on mobile, and if section is bigger than phone screen it makes even more problems
@lukas.webdev
Жыл бұрын
Yes, this works on mobiles as well ... 😉
@saaika5922
Жыл бұрын
@@lukas.webdev so how would you fix issue with bigger than 100vh stuff so that user can read and dont feel laggy scroll?
@smith4591
Жыл бұрын
I never thought implementing snap scroll this easy
@abdullahsoomro6238
Жыл бұрын
Thanks a lot.
@CS_HimanshuVishwakarma
Жыл бұрын
Can you create a video on cart in react with an easy method
@user-zn7kx2hi2g
2 ай бұрын
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
@illegalcall
Жыл бұрын
Can you make the snap scroll a bit longer, its very fast for a desktop
@VidarrKerr
Жыл бұрын
Still need js though. That snap is brutal.
@etiennez0r846
Жыл бұрын
really awesome vid ❤
@NOTHING-en2ue
Жыл бұрын
Very useful thanks a lot
@robertbutcher222
10 ай бұрын
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?
@giorgiberdzenishvili4115
Жыл бұрын
მადლობა როგორც ყოველთვის საინტერესო და სასარგებლო. Thanks as always interesting and useful
@PhilDiasPJD
Жыл бұрын
Simple!!! Thanks
@alprienaldi5748
Жыл бұрын
i try to do this on bootstrap studio. the snaping is working but it wont animate the content. can u tell me why?
@MdNaimurRahmanHera
Жыл бұрын
Wow that's a new thing I learned
@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... 😉
@hafizmuhammadbinasghar3108
5 ай бұрын
how i can add animations in it? i want it to be smoother
@jam4l
Жыл бұрын
This is great thanks
@albedoUniversal
Жыл бұрын
we have been using this method seen year. But there one problem on ios with safari search bar in the bottom of screen. How do you fix it?
@74mada
Жыл бұрын
Thank a lot, dude.
@colebrazeal9432
7 ай бұрын
Any reason why this wouldn't work? I applied all the steps you provided but for some reason it is not working.
@felipeleon6631
Жыл бұрын
great videoo!! very useful
@hoctapit7719
Жыл бұрын
Can you create 1 course on react js I am very supportive
@definitelynotje
7 күн бұрын
thanks bruh
@VXTivkot
Жыл бұрын
THIS SECTION ELEMENT ADDS THIS PAGE AND THE NUMBERS FOR THE PAGE BY DEFAULT?
@tsooooooo
Жыл бұрын
Goddammit CSS is getting crazier and crazier. Thanks for the info tho
@pajeetsingh
8 ай бұрын
Why does the section need to be 100vh?
@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..
@sujoykrhaldar
Жыл бұрын
Is is possible to slowdown the speed or smoothness via css ?
@ssk7690
Жыл бұрын
amazing!
@wotok7
Жыл бұрын
Also wondered why scroll-snap-stop doesn't work in desktop Chrome?! By the way in Firefox it works as epxected.
@sunilnune5681
Жыл бұрын
Hi do you have any Idea of using MUI in Next Js 13.4?
Пікірлер: 182