CSSscroll-behavior プロパティは、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを指定します。

なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが body 要素に指定された場合は、ビューポートには適用されません

ユーザーエージェントは、このプロパティを無視することができます。

構文

/* キーワード値 */
scroll-behavior: auto;
scroll-behavior: smooth;

/* グローバル値 */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

scroll-behavior プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

auto
スクロールするボックスは瞬時にスクロールします。
smooth
スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑ににスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。

形式文法

auto | smooth

HTML

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

CSS

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

結果

仕様書

初期値auto
適用対象scrolling boxes
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
scroll-behavior の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応611 なし36 なし あり2 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ? なし36 なし なし ?

1. From version 61: this feature is behind the Enable experimental web platform features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.

2. This feature is behind the Smooth Scrolling preference (needs to be set to true).

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, KitaitiMakoto, momdo
最終更新者: mfuji09,