PLAY CSS
jaen

ユーザー操作

scroll-behavior

scroll-behavior は、ページ内リンクや JavaScript でスクロールさせたときに、すぐに移るか、なめらかに動かすかを指定します。smooth にすると、目的の位置までなめらかにスクロールします。

構文

auto | smooth

プレビュー

123
プリセット
右下の角をドラッグするとサイズを変えられます

コード

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

コントロール

scroll-behaviorsmooth
scroll-behavior
123

解説

値の意味

  • auto：初期値です。すぐに目的の位置へ移ります。
  • smooth：少し時間をかけて、なめらかにスクロールします。かかる時間や動き方はブラウザが決めます。

プレビューは、3 枚の札を縦に積んでスクロールする箱（補助の overflow: auto）に書いています。下の番号のボタンを押すと、JavaScript の scrollTo でその札の上端までスクロールします。smooth ではなめらかに動き、auto ではすぐに切り替わります。

よく使う場面

目次や「ページの先頭へ」のようなページ内リンクで、どこへ移ったのかがわかるように、なめらかにスクロールさせたいときに使います。

気をつけること

  • マウスのホイールやスクロールバーなど、利用者が自分でスクロールするときの動きは変わりません。効くのは、ページ内リンクで移るときや、scrollTo・scrollIntoView などの JavaScript でスクロールさせるときです。
  • ページ全体のスクロールに効かせるには html に書きます。body に書いても、ページ全体のスクロールには効きません。
  • JavaScript で scrollTo({ top: 0, behavior: 'instant' }) のように behavior を書くと、そちらが優先されます。
  • 画面の動きで気分が悪くなる人もいます。OS で動きを減らす設定にしている人にはなめらかなスクロールをしないように、@media (prefers-reduced-motion: no-preference) の中で smooth にする書き方がよく使われます。

参考リンク

MDN Web Docsscroll-behaviorSpecificationCSS Overflow Module Level 3Can I usescroll-behavior

コメント

PLAY CSS