Native Smooth Scroll with Pure CSS and JS

Опубликовано: 23 Май 2026
на канале: Lucas Paganini

25,926

278

Forget JQuery, we're past that. We have smooth scroll backed into native CSS and JavaScript now.

📚 Read the article: https://www.lucaspaganini.com/academy...
🚨 Subscribe to the newsletter: https://www.lucaspaganini.com/newsletter

📧 Email: [email protected]
🐦 Twitter: / lucaspaganini
📸 Instagram: / lucaspaganini

----------

CHAPTERS
0:00 Introduction
0:11 CSS scroll-behavior
0:54 scroll() vs scrollTo()
1:13 Window.scrollTo() and Element.scrollTo()
1:52 Element.scrollLeft and Element.scrollTop
2:01 Negative Element.scrollLeft
2:25 Window.scrollBy() and Element.scrollBy()
2:58 Window.scrollByLines() and Window.scrollByPages()
3:20 Element.scrollIntoView()
4:12 Browser Support
5:00 Conclusion

REFERENCES
1. CSS scroll-behavior: smooth: https://developer.mozilla.org/en-US/d...
2. Element.scrollTop: https://developer.mozilla.org/en-US/d...
3. Element.scrollLeft: https://developer.mozilla.org/en-US/d...
4. Smooth scroll polyfill: https://github.com/iamdustan/smoothsc...
5. Smooth scroll polyfill supported methods: http://iamdustan.com/smoothscroll/
6. scroll-behavior: "instant" renamed to "auto": https://drafts.csswg.org/cssom-view/#...
7. "block" and "inline" options for scrollIntoView(): https://stackoverflow.com/a/48635751
8. Smooth scroll browser support: https://caniuse.com/css-scroll-behavior
9. CSS specification for scroll-behavior: https://drafts.csswg.org/cssom-view/#...
10. Smooth scroll proposal for scrollTo(): https://lists.w3.org/Archives/Public/...