最近便利なCSSおれおれAdvent Calendar 2023 – 06 日目

scroll-behavior でハッシュ付き URL とかでジャンプするときのスクロールをなめらかアニメーションさせることができます。

使い方

.scrollBox {
  overflow: auto;
  scroll-behavior: smooth;
}

JS でのジャンプにも利く

scrollTo() 等でスクリプトからスクロールする際にも利きます。楽ちんですね。

ちなみに実行時オプションで CSS の設定を上書きできます。

アニメーション制御はなし

ON/OFF だけです。速度とかはブラウザー次第。

あとブラウザーの気分次第で無視しても良いと仕様に書かれています。そうなんだ。

おしまい

昔はみんな頑張って JavaScript で計算してアニメーションさせてましたね。

参考