· 1 min read
How to Achieve Smooth Scroll with One Line of CSS
This article was auto-translated from Chinese. Some nuances may be lost in translation.
Just as I was happily implementing smooth scroll in Svelte, I discovered that it can actually be done with a single line of CSS:
html {
scroll-behavior: smooth;
}Aside from keeping browser support in mind, this completely saves developers the trouble of importing a library or implementing it themselves.
It achieves smooth-scroll perfectly without needing to override the behavior of hashchange or state change. I’ll write another post some other day about how to achieve smooth scroll without CSS.
Related Posts
- Things to Keep in Mind When Using Images in Frontend Development Expanding on Jake Archibald's article, this post organizes how modern responsive images should be written: why width/height are still necessary, when to use CSS aspect-ratio, how to choose between AVIF and WebP, and using picture/source/srcset for art direction on mobile devices.
- CSS field-sizing — Auto-resize Form Elements with a Single Line of CSS Previously, auto-resizing a textarea required listening to scrollHeight in JavaScript. With CSS field-sizing: content, a single line replaces it all, supporting textarea, input, and select. This article covers the pain points of older approaches and how to use field-sizing.
- Make Your Link Underlines Look Better: text-underline-offset By default, underlines sit very close to the text. Some designers dislike this look, and personally, I don't think it looks great either.
- Why the Web Shouldn't Strive for Pixel Perfection You should only focus on pixel perfection when it truly matters; otherwise, it often results in a lose-lose situation.