Simple single-page smooth scrolling
HTML-код
- Опубликовано: 17 янв 2023
- Code: codepen.io/kevinpowell/pen/eY...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
The code: codepen.io/kevinpowell/pen/eYjRVmw
Nice. Now get RUclips Web Page to make a button (up and down) on there screen for moving down one set of Vids.
Please bring more and more of such powerfull shorts of CSS/JS.
Thanks
What I really learnt from this is that you can manipulate CSS variables from Javascript, and how to. 🙏
Hands down some of the best if not the best shorts on YT. Thank you for always offering up useful tidbits that are actually applicable in daily life.
oh!!! you can use JS to set CSS Vars 🤯😄 I needed this, Thank you!!
Yes, and one awesome superpower: It’s reactive. That is, every var() utilizing that custom attribute/var will immediately respond to those changes. 🔥
You can even use PHP for that it you want.
@@ayviuonPHP runs on a server, how would you like to change a client-side variable?
When one short defeats 99% of the pages who mislead you for this same concept! DUDE you are awesome!
I love you Kevin I spent a lot of hours playing with the JS Scroll events and then you save my day using CSS, Thank you very much
I just have my height controlled by the same custom property that also sets scroll padding.
No matter how familiar or new I am to something I always find your videos useful and entertaining. Thanks for sharing. Cheers
Thanks Kevin, you have always been there for me 🙂
thankyou sir, you’re rock
I had no idea you could set css variable values with js. That is super powerful.
You're a life saver Kevin! This was exactly what I needed!
This guy understands our current problems 🪄🪄 Keep going Kevin .
Dude is a legit pro. I don't just mean at web dev, but teaching it as well.
Thats absolutely awesome
You are a life saver man, I was stragling with this problem for days
Thank you
thank you mate, have a good day ❤️
Thank you for this!
I needed this a few months ago. 😂. Great tip!
Yes! More devs need to know about this. Another great reason to support this is to ensure #hash links work seamlessly with your sticky headers. All too often I see sites linking to positions within the page that are _confusingly_ not visible or otherwise overlapped by their (also probably too big) sticky header.
I recently ran into this problem and thought there was no solution for it. You sir are a wizard.
This is the exact problem I was going through. You are genius boss
Thanks!!!!! Just searching for this problem
Finally CSS with Js!
Thanks a lot, scroll-padding helped! I need to study the JS approach in more detail but so far the padding is good enough for my purpose.
Thankyou
Never heard of scroll-padding before - what a great solution!
Excellent video! Thank you
Beautiful. Gone are the day of fiddling with offsetx like a newbie
exactly figuring it out and here is kevin doctor strange.
This was perfect and so needed! 🎉
thank you works amazing
Wow thanks Kev 🙏🏼
Since I’ve started messing around with JS, it truly transformed my point of view over CSS, it makes it sooo much more powerful, even though CSS3 really is powerful on its own, JS brings it to the next level
wow this was very helpful thanks
oh my gooodddddd!!!!!!!!!!!! thank very much this helped me a lot.
Wow. That's really cool. I'm sending myself this video. 👍👍
thanks
You are a genius
Thanks 😌😌 it's very helpful ☺️
I’ve had this issue with the scroll being to far last night and I said I’ll figure it out tomorrow. I’m so glad I found my answer without even looking for it
try just adding an empty div above each section. scroll to that instead.
You re such a genius 🔥🔥❤️
Magical!
And now you also need to handle this on resize otherwise if mobile menu height changes on mobile, you might scroll-padding the wrong value.
Or you can just set the scroll-padding to the same height you set for the navbar
this is good stuff.
brilliant
NICE
Nice
You are best😩🤲❤️
OMG this is my problem 2 years ago ;-;. Anyways, thanks for sharing sir Kevin!
shukran
🤯
Wow
nice, thanks Kevin! Is there a way that we can do sth in "reverse" with scroll height: to make a string (a title lets say) to change dynamically depending on the section the user sees ? So when her screen is at "Section 4", there's a title who changes accordingly ?
Have you done sth like already? Thanks in advance man
wow
Found helpful something
You are a crack, thank you so much!!!!!
Thx! How about highlighting nav links on hover?
awesome, its single line of code change and i was trying it since twodays to fix this.
thanks, i was trying apply scroll-behavior on body tag and wasnt work
Awesome. Can you this example with resizeObserver to update the padding if header is changed bei resizing? Think that would be interesting and makes it responsive too
Where can I find the full video about This. Thanks
Nice video
How to make scrolling from the mousewheel smooth without a library?
Great idea to set that custom value via JavaScript but have a fallback
W algo
But is it good for SEO? Since there’s some JavaScript involved
wow, scroll padding must be new
What if someone links directly to a section target? How can I engage the code then?
About this, when you click a href link, it changes the url name as well. How do you somehow save the original domain name somewhere permanently, localstorage changes the name everytime the user reloads so it won't work for me
I see devs giving each section a 100vh, so when you hit the link and scrolls the section covers the viewport and solves the issue of scrolling and don't get to the middle. Kevin what do you think about this approach?
What about `:target{ scroll-margin-top: 10rem; }`?
Hello Kevin- do you know how I can create a payment page on my website where I can take payment from clients for items I sell
what if the navbar is being resized?
It's much more readable to just scroll to an empty div above each section.
Is there a way to achieve this with especially without the magic number?
it's in the vid !
What about Firefox?
maybe i am weird but i find smooth scrolling annoying. If i go back and forth a lot between sections this is slow and disorienting like i am on a roller coaster.
maybe faster the scrolling animation i guess
For some people it can be super annoying, and even disorientating, and one reason it's important to turn off animations like this if people have disabled this type of thing in their system... I couldn't squeeze that into this short, but I have talked about it in passing in longer videos, and I should do some longer content on that as well.
Personally I like it because I find it easier to keep track of where I am on a page.
Maybe I’m blind, but where do you define the value of the --scroll-padding property? I know that you set 5rem as the fallback value, but is that the value it gets, since it has no set value elsewhere?
The html element
I never defined it, I let the JS do that (in this case, it's applying it to the html element). If the JS fails to load or somethin,, it goes to the fallback value.
@@KevinPowell, of course!
With nearly six years of experience with HTML and CSS, I should’ve caught that.
But thanks for answering nonetheless! :)
Why doesn't scroll behavior do anything for me it still just jumps
hallo Mr. Powell. what this is full youtube ?
there's so much simpler way
You can achieve this without JS by having one CSS variable control nav height and scroll padding
Yeah, but fixed heights are the worst :P. For a nav you can get away with them obviously, but I always tend to avoid them when I can.
@@KevinPowell yeah ur right. JS is probably the best solution here
Great solution, but why make this a short? I have to keep re-watching it so I can rewind to the see the long strings. lol
I want to pull my eyeballs out.
Definitely the wrong format for code...
Это просто охуенно!
The js part of this seems very hacky.
V
Fake 😡
Nice
wow