scroll-behaviorプロパティの説明
CSSのscroll-behaviorプロパティは、スクロールが発生した場合の挙動を指定します。この機能は、ユーザーが実行したスクロールではなく、ナビゲーションやAPIによって発生したスクロールに対して有効です。
scroll-behaviorを<html>に指定した場合はビューポートに適用され、<body>に適用した場合は要素に適用されます。
scroll-behaviorに指定できる値
auto- スクロールが発生した場合、瞬時に終了して目的の位置へ移動します。
smooth- スクロールがなめらかな移動に変わります。移動速度はユーザーエージェントに依存します。
scroll-behaviorの使い方とサンプルコード
scroll-behaviorプロパティの構文は以下の通りです。
/* キーワード値 */
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キーで強調表示をする機能を有効にして下さい。
<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>
.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;
}