· 1 min read
How to do smooth scroll with one line of CSS
# Frontend This article was auto-translated from Chinese. Some nuances may be lost in translation.
Just when I was happily implementing smooth-scroll with Svelte, I discovered that it can actually be achieved with just one line of CSS:
html {
scroll-behavior: smooth;
}Aside from having to consider browser support, this completely eliminates the hassle for developers of importing a library or implementing it themselves.
This perfectly implements smooth-scroll without needing to rewrite the behavior of hashchange and state change. I’ll write another article soon on how to achieve smooth-scroll without using CSS.
Related Posts
- What to Pay Attention to When Using Images on the FrontendBased on an article by Jake Archibald, this post organizes how modern responsive images should be written: why `width`/`height` still matter, when to use CSS `aspect-ratio`, how to choose between AVIF and WebP, and how to use `picture`/`source`/`srcset` for switching images on mobile.
- CSS field-sizing — Auto-Resize Form Elements with One Line of CSSMaking a textarea auto-resize used to require JavaScript to watch scrollHeight. CSS field-sizing: content replaces all of that in one line, supporting textarea, input, and select.
- Make Your Hyperlink Underlines Look Better: text-underline-offsetBy default, underlines sit very close to the text, and some designers dislike this style. Personally, I don’t think it looks very good either.
- Why Web Design Shouldn’t Chase Pixel PerfectOnly pay attention to Pixel Perfect when it really matters; otherwise, it often leads to a lose-lose situation.