CSS の scroll-behavior プロパティは、ナビゲーションや CSSOM のスクローリング API によってスクローリングボックスにスクロールが発生した際の、そのスクロールの振る舞いを指定します。 ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。

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

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

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

初期値auto
適用対象scrolling boxes
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

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;
}

出力

仕様

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

ブラウザー互換性

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート611 無し36 無し 有り2 無し
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート 無し ? 無し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).

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

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