scroll-behavior

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

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

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

構文

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

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

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

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

公式定義

初期値auto
適用対象スクロールするボックス
継承なし
計算値指定値
アニメーションの種類個別

形式文法

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 の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scroll-behaviorChrome 完全対応 61Edge 完全対応 79Firefox 完全対応 36IE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 61Chrome Android 完全対応 61Firefox Android 完全対応 36Opera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応
未対応  
未対応