logo
  • 現在做什麼
  • 關於我

Kalan

文章分類

  • 前端
  • 開發筆記
  • 雜談
  • 年度回顧

快速連結

  • 現在做什麼
  • 關於我
  • 聯絡我
  • 職涯思考🔗

關注我

在福岡生活的開發者,分享軟體開發與日本生活的點點滴滴。

© 2025 Kalan Made with ❤️. All rights reserved.

如何用一行 CSS 做到 smooth-scroll

由愷開愷開撰寫2020年5月7日 1:57
首頁/前端
💡

如果想問問題或單純回饋的話可以填寫表單唷

English日文

目錄

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

    html {
      scroll-behavior: smooth;
    }

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

    Screenshot_2020-05-07 scroll-behavior

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

    ← 如何為你的專案引入 Github Actions從無到有寫一個 JSON 解析器(1) →

    如果覺得這篇文章對你有幫助的話,可以考慮下面的連結請我喝一杯 ☕ 可以讓我平凡的一天變得閃閃發光 ✨

    ☕Buy me a coffee