scroll-behavior

インタラクション・UX

スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。

構文

Syntax
scroll-behavior: auto | smooth

コード例

1

scroll-behavior: auto;
実行結果
スムーズスクロール有効
セクション1
セクション2
セクション3

即座にスクロール(デフォルト)

2

scroll-behavior: smooth;
実行結果
コンテナスクロール
コンテンツ1
コンテンツ2
コンテンツ3

滑らかにスクロール

💡 TIPS

アンカーリンク(#section1など)のスクロールが自動的にスムーズになる。JavaScriptなしで実装可能。

⚠️ よくある間違い

htmlまたはスクロールコンテナに指定する必要がある。子要素に指定しても効果がない。ユーザーの設定でモーション削減が有効な場合は無効化される場合がある。

関連プロパティ

ブラウザサポート

Chrome 61+, Firefox 36+, Safari 15.4+