scroll-behavior：スクロールが発生した場合の挙動を指定する

t
f
LINE
B!
p

初期値	`auto`
適用対象	スクロールするボックス
継承	しない
アニメーション	離散値
対応ブラウザ	caniuseで確認

scroll-behaviorプロパティの説明

scroll-behaviorは、スクロールが発生した場合の挙動を指定します。この機能は、ユーザーが実行したスクロールではなく、ナビゲーションやAPIによって発生したスクロールに対して有効です。

scroll-behaviorを<html>に指定した場合はビューポートに適用され、<body>に適用した場合は要素に適用されます。

scroll-behaviorに指定できる値

auto: スクロールが発生した場合、瞬時に終了して目的の位置へ移動します。
smooth: スクロールがなめらかな移動に変わります。移動速度はユーザーエージェントに依存します。

scroll-behaviorの使い方とサンプル

scroll-behaviorプロパティの構文は以下の通りです。

CSS

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

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

scroll-behaviorの実例

それでは実際にscroll-behaviorプロパティの書き方を見ていきましょう。以下の例は、ラジオボタンのfocusを利用して、ボックスの中を移動する時の挙動です。scroll-behaviorに対応しているブラウザであれば、指定した値によって移動形式が変わります。

Safari系のブラウザでフォーカスが効かない場合は、環境設定のTabキーで強調表示をする機能を有効にして下さい。

表示確認

CSS

.samp_box {
	padding: 1rem;
	background-color: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.samp_box > .column {
	background-color: #fff;
	text-align: center;
}
.nav_box {
	padding: 1rem 0;
	border-bottom: 1px solid #ccc;
}
.nav_box label {
	margin: 0 .5rem;
	padding: .5rem;
	border: 1px solid #ccc;
	cursor: pointer;
}
section {
	overflow: scroll;
	height: 300px;
	padding: 0 1rem;
}
section div {
	margin-bottom: 20rem;
	padding: 1rem 0;
	color: #fff;
}
div > input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 2px;
	width: 1.2em;
	height: 1.2em;
	border: 1px solid #fff;
	vertical-align: text-bottom;
}
div > input:checked {
	background-color: #fff;
	background-clip: content-box;
}
#item_0 {
	background-color: #999;
}
#item_1 {
	background-color: #f90;
}
#item_2 {
	background-color: #09f;
}
#item_3 {
	background-color: #9f0;
}
.scroll_auto {
	scroll-behavior: auto;
}
.scroll_smooth {
	scroll-behavior: smooth;
}

HTML

<div class="samp_box">
	<div class="column">
		<nav class="nav_box">
			<label for="jump_a1">Jump 1</label>
			<label for="jump_a2">Jump 2</label>
			<label for="jump_a3">Jump 3</label>
		</nav>
		<section class="scroll_auto">
			<div id="item_0">
				scroll-behavior: auto;
			</div>
			<div id="item_1">
				<input type="radio" name="s" id="jump_a1"> Item 1
			</div>
			<div id="item_2">
				<input type="radio" name="s" id="jump_a2"> Item 2
			</div>
			<div id="item_3">
				<input type="radio" name="s" id="jump_a3"> Item 3
			</div>
		</section>
	</div>
	<div class="column">
		<nav class="nav_box">
			<label for="jump_b1">Jump 1</label>
			<label for="jump_b2">Jump 2</label>
			<label for="jump_b3">Jump 3</label>
		</nav>
		<section class="scroll_smooth">
			<div id="item_0">
				scroll-behavior: smooth;
			</div>
			<div id="item_1">
				<input type="radio" name="s" id="jump_b1"> Item 1
			</div>
			<div id="item_2">
				<input type="radio" name="s" id="jump_b2"> Item 2
			</div>
			<div id="item_3">
				<input type="radio" name="s" id="jump_b3"> Item 3
			</div>
		</section>
	</div>
</div>

scroll-behaviorに関連するCSSプロパティ

要素の装飾や描画指定
accent-color	一部の要素の強調色を指定する
all	要素の全てのプロパティを初期化する
appearance	ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする
caret-color	テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
cursor	マウスポインタのカーソルの種類を指定する
filter	画像やテキストにフィルタ効果を与える
isolation	要素のスタッキング・コンテキストを制御する
mix-blend-mode	重なり合った要素の内容と背景に対して描画モードを指定する
opacity	要素の不透明度を指定する
scroll-behavior	スクロールが発生した場合の挙動を指定する
user-select	ユーザーがテキストを選択できるかどうかを指定する