Kalan's Blog

Kalan 頭像照片,在淡水拍攝,淺藍背景

四零二曜日電子報上線啦!訂閱訂起來

Software Engineer / Taiwanese / Life in Fukuoka
This blog supports RSS feed (all content), you can click RSS icon or setup through third-party service. If there are special styles such as code syntax in the technical article, it is still recommended to browse to the original website for the best experience.

Current Theme light

我會把一些不成文的筆記或是最近的生活雜感放在短筆記,如果有興趣的話可以來看看唷!

Please notice that currenly most of posts are translated by AI automatically and might contain lots of confusion. I'll gradually translate the post ASAP

How to do smooth scroll with one line of CSS

When I happily implemented smooth-scroll using Svelte, I discovered that it can actually be achieved with just one line of CSS:

html {
  scroll-behavior: smooth;
}

Apart from concerns about browser support, this completely eliminates the hassle of developers importing libraries or implementing it themselves.

Screenshot_2020-05-07 scroll-behavior

Perfectly achieving smooth-scroll without the need to modify hashchange and state change behaviors. I will write an article someday on how to achieve smooth-scroll without using CSS.

Prev

How to bring Github Actions to your project

Next

Write a JSON parser from scratch (1)

If you found this article helpful, please consider buy me a drink ☕️ It'll make my ordinary day shine✨

Buy me a coffee