scroll-behavior: smooth
scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 61 | 79 | 36 | 15.4 | 61 | 15.4 | |
auto | 61 | 79 | 36 | 15.4 | 61 | 15.4 |
smooth | 61 | 79 | 36 | 15.4 | 61 | 15.4 |
基本構文
CSS
html {
scroll-behavior: smooth;
}
/* Apply only to specific containers */
.scroll-area {
scroll-behavior: smooth;
overflow-y: auto;
}ライブデモ
実務での使いどころ
-
ページ内リンク
目次やトップへ戻るボタンなど、ページ内アンカーリンクのスクロールをなめらかにする。
注意点
- prefers-reduced-motion を考慮し、モーション軽減設定時は auto に戻すべき。
フォールバック戦略
CSS
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}アクセシビリティ
- モーション酔いを防ぐため、prefers-reduced-motion: reduce の場合は scroll-behavior: auto にフォールバックする。