Scroll
Smooth scrolling links with only CSS
Scroll Behavior
Why you might still want to use a JavaScript solution
I actually expect to use this approach more and more, my Smooth Scroll plugin less and less.
- I’ve found that, for long scrolls, the animation with scroll-behavior can be janky. This is surprising. I would have expected the CSS to tie into the browser’s frame refresh rate to prevent that from happening.
- The scroll-behavior property has no easing or timing support. If you want to control how fast the animation runs, or the easing pattern in which it animates, you need JavaScript.
- You always want to it work across browsers. A JavaScript solution can get you more broad browser support.
Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
Because overflow: hidden
creates a scroll container it can interfere with the Scroll-Driven Animations scroller lookup mechanism. The fix is to use overflow: clip
instead.
Children