Scroll Behavior プロパティ

最終更新：2026-09-13

scroll-behavior Scroll Behavior プロパティ

scroll-behavior プロパティは、スクロールが目的地へ瞬時にジャンプするか、滑らかにアニメーションするかを制御します。smooth にすると、アンカーリンクのクリックや JavaScript からのスクロールが、ジャンプするのではなく目的地へ滑らかに移動し、ユーザー体験を大きく向上させます。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

scroll-behavior: auto | smooth;

⚙️ 値

値	タイプ	説明
`auto \| smooth`	キーワード	スクロールの挙動

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
scroll-behavior	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： html 要素やルートのスクロールコンテナに scroll-behavior: smooth を設定すると、グローバルに適用されます。

注意： スムーズスクロールはユーザーの prefers-reduced-motion アクセシビリティ設定を尊重します。ユーザーが「アニメーションを減らす」を有効にしている場合、ブラウザは smooth の値を自動的に無視します。

❓ よくある質問

Qscroll-behavior: smooth は JavaScript の window.scrollTo() に影響しますか？

Aはい。スクロールコンテナに scroll-behavior: smooth が設定されていれば、window.scrollTo、scrollBy、scrollIntoView はデフォルトで滑らかにスクロールします。JavaScript で { behavior: 'smooth' } を明示的に渡して上書きすることもできます。アンカーのジャンプは最も近いスクロールコンテナで発生することに注意してください。

Qブラウザで CSS のスムーズスクロールが機能しないのはなぜですか？

A順に調査します。プロパティが実際にスクロールする要素に設定されているか（ページレベルのスクロールは html、内部スクロールは overflow 要素）を確認してください。システムの prefers-reduced-motion: reduce によって上書きされていないか（アニメーション削減の設定は smooth を強制的に無視します）を確認してください。また、JavaScript が behavior: 'auto' でデフォルトを上書きしていないかを確認してください。

Qscroll-behavior: smooth プロパティはページのパフォーマンスに影響しますか？

Aスムーズスクロールはブラウザにネイティブに実装されており、スクロールはメインスレッドをブロックせず合成スレッドで実行されるため、パフォーマンスコストはわずかです。ただし、スクロール中に重い再レイアウトや再描画（遅延読み込みされた画像、スタイルを変更する scroll リスナーなど）が発生すると、依然としてカクつく可能性があります。scroll イベントでの高負荷な処理を避けるか、passive リスナーを使って最適化してください。

Qscroll-behavior と JavaScript によるスムーズスクロールの違いは何ですか？

Ascroll-behavior: smooth はブラウザにネイティブに駆動され、JavaScript 不要でパフォーマンスに優れ、prefers-reduced-motion 設定を自動的に尊重します。JavaScript（requestAnimationFrame での手動スクロール）は制御性に優れ、カスタムなイージングや特定のオフセットまでのスクロールが可能ですが、コード量は増えます。CSS で済む場合は CSS を優先してください。