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

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

@-規則
メディアクエリ
セレクタ
疑似要素
疑似クラス
CSS関数
色の指定
背景
ボックス
アニメーション

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ