· 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
- 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.
- Let’s Write Colors with CSS HSL! (And a Better Way)In web development, the traditional HEX and RGB color notations are widely used, but they are not very readable or intuitive, and their capabilities are limited in wider color spaces such as P3. HSL (Hue, Saturation, Lightness) provides a more intuitive way to define colors, making it easier for developers to understand and adjust them. By describing colors through the three dimensions of hue, saturation, and lightness, HSL makes color adjustment more human-friendly. In design systems in particular, HSL can better represent lightness variations in a color palette.