半熟前端

軟體工程師 / 台灣人 / 在前端的路上一邊探索其他領域的可能性

前端

如何用一行 CSS 做到 smooth scroll

正當我開開心心用 svelte 實作了 smooth-scroll 之後,我發現其實可以用一行 CSS 達到:

html {
  scroll-behavior: smooth;
}

除了瀏覽器支援可能要擔心一下,完全省掉開發者引入 library 或是自己實作的麻煩。

Screenshot_2020-05-07 scroll-behavior

完美達成 smooth-scroll,不需要再透過改寫 hashchange 跟 state change 的行為。改天再寫一篇文章談談要怎麼不用 CSS 做到 smooth-scroll 好了。