CSS辞書

scroll-behavior

インタラクション・UX

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

構文

Syntax
scroll-behavior: auto | smooth

Tailwindでは

scroll-smoothscroll-behavior: smooth
scroll-autoscroll-behavior: auto

motion-reduce:scroll-auto の併記を推奨。

コード例

1

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

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

2

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

滑らかにスクロール

💡 TIPS

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

⚠️ よくある間違い

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

🤖 AIがよく間違えるポイント

html { scroll-behavior: smooth }はページ内リンクを滑らかにしますが、ページ内検索やアンカー着地まで常時スムーズになるのを嫌う場合はJS側のscrollIntoView({behavior})で個別制御します。またprefers-reduced-motion環境ではautoに戻す配慮(メディアクエリで打ち消し)をAIは省略しがちです。

💬 AIへの頼み方

ページ内リンクのスムーススクロールを、prefers-reduced-motion配慮込みで実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
61+
Firefox
36+
Safari
15.4+
Edge
79+