scroll-behaviorスクロール動作について設定する
scroll-behavior
プロパティは、スクロール可能なボックスにスクロールが発生した際のスクロール動作について設定します。
指定可能な値は下記の通りで、smooth
を使用することで、所謂 「スムーズスクロール」 を CSS のみで実現できます。
値 | 意味 |
---|---|
auto | スクロールは瞬時に行われます (初期値)。 |
smooth | スクロールはユーザエージェントが定義した速度と動きによって滑らかに行われます。所謂スムーズスクロールが実現可能です。 なお、プラットフォームでの慣習や規約があるのであれば、ユーザエージェントはそれに従うべきと定義されています。 |
このプロパティがルート要素 (html
要素) に指定された場合はビューポートに適用されます。body
要素への指定ではビューポートには適用されません。
なお、このプロパティの影響範囲は、アンカーリンクなどのナビゲーションによるページ内の移動や、CSS Object Model (CSSOM) View Module におけるスクロール API によってスクロール可能なボックスにスクロールが発生した場合などに限られ、ユーザー自身が実行したスクロール、つまりマウスやキーボードの操作によるスクロールに関してはこのプロパティの影響を受けません。
scroll-behaviorの仕様
- 初期値
-
-
auto
- 対象となる要素
-
- スクロールするボックス
- 継承
-
- なし
scroll-behaviorのサンプルソース
.scroll-contents { scroll-behavior: smooth; display: block; overflow-y: scroll; height: 200px; width: 100%; }
主要ブラウザの対応
IE11 | × |
---|---|
Edge(EdgeHTML) | × |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○+15.4 |
iOS Safari | ○+15.4 |
Android Chrome | ○ |