blob: 8103e98b171c118d0092aca9e7ae72b6477a185e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: scroll-behavior
slug: Web/CSS/scroll-behavior
tags:
- CSS
- CSS Property
- CSS プロパティ
- CSSOM View
- Reference
- 'recipe:css-property'
translation_of: Web/CSS/scroll-behavior
---
<p>{{CSSRef}}</p>
<p><strong><code>scroll-behavior</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。</p>
<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p>なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが <code>body</code> 要素に指定された場合は、ビューポートには適用され<em>ません</em>。</p>
<p>ユーザーエージェントは、このプロパティを無視することができます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
scroll-behavior: auto;
scroll-behavior: smooth;
/* グローバル値 */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
</pre>
<p><code>scroll-behavior</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>auto</code></dt>
<dd>スクロールするボックスは瞬時にスクロールします。</dd>
<dt><code>smooth</code></dt>
<dd>スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑ににスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。</dd>
</dl>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Example" name="Example">例</h2>
<h3 id="Setting_smooth_scroll_behavior" name="Setting_smooth_scroll_behavior">スクロールの動きをスムーズに設定</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">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;
}
</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{ EmbedLiveSample("Setting_smooth_scroll_behavior", "100%", 250) }}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.scroll-behavior")}}</p>
|
