· 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
- Recreating My Room with Three.js Using React Three Fiber, I brought my real room into the browser—turning physical objects into an interactive table of contents, and using spatial memory to tell the story of my life and work over the past few years.
- 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.