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
134
135
136
137
138
139
140
|
---
title: overscroll-behavior-block
slug: Web/CSS/overscroll-behavior-block
tags:
- CSS
- CSS ボックスモデル
- CSS Logical Properties
- CSS Property
- NeedsExample
- Reference
- overscroll-behavior-block
- 'recipe:css-property'
translation_of: Web/CSS/overscroll-behavior-block
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>overscroll-behavior-block</code></strong> は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
overscroll-behavior-block: auto; /* 既定値 */
overscroll-behavior-block: contain;
overscroll-behavior-block: none;
/* グローバル値 */
overscroll-behavior-block: inherit;
overscroll-behavior-block: initial;
overscroll-behavior-block: unset;
</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>overscroll-behavior-block</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>auto</code></dt>
<dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
<dt><code>contain</code></dt>
<dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
<dt><code>none</code></dt>
<dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
</dl>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Preventing_block_overscrolling" name="Preventing_block_overscrolling">ブロック方向のオーバースクロールの抑止</h3>
<p>このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と <code>height</code>) が小さく、ビューポート内にきちんと収まりますが、内容は広い <code>height</code> を持つため、垂直にスクロールします。</p>
<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに <code>overscroll-behavior-block: contain</code> を設定しました。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><main>
<div>
<div>
<p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
</div>
</div>
</main></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">main {
height: 3000px;
width: 500px;
background-color: white;
background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}
main > div {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-block: contain;
}
div > div {
height: 1500px;
width: 100%;
background-color: yellow;
background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}
p {
padding: 10px;
background-color: rgba(255,0,0,0.5);
margin: 0;
width: 340px;
position: relative;
top: 10px;
left: 10px;
}</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}</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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}</td>
<td>{{Spec2('CSS Overscroll Behavior')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.properties.overscroll-behavior-block")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
</ul>
|
