diff options
Diffstat (limited to 'files/ja/web/css/overscroll-behavior-block/index.md')
| -rw-r--r-- | files/ja/web/css/overscroll-behavior-block/index.md | 119 |
1 files changed, 53 insertions, 66 deletions
diff --git a/files/ja/web/css/overscroll-behavior-block/index.md b/files/ja/web/css/overscroll-behavior-block/index.md index 630f084a46..bd8ab8bd81 100644 --- a/files/ja/web/css/overscroll-behavior-block/index.md +++ b/files/ja/web/css/overscroll-behavior-block/index.md @@ -4,21 +4,22 @@ slug: Web/CSS/overscroll-behavior-block tags: - CSS - CSS ボックスモデル - - CSS Logical Properties - - CSS Property - - NeedsExample - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - リファレンス - overscroll-behavior-block - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.overscroll-behavior-block translation_of: Web/CSS/overscroll-behavior-block --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>overscroll-behavior-block</code></strong> は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。</span></p> +**`overscroll-behavior-block`** は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。 -<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p> +全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ overscroll-behavior-block: auto; /* 既定値 */ overscroll-behavior-block: contain; overscroll-behavior-block: none; @@ -26,60 +27,62 @@ overscroll-behavior-block: none; /* グローバル値 */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; +overscroll-behavior-block: revert; overscroll-behavior-block: unset; -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>overscroll-behavior-block</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p> +`overscroll-behavior-block` プロパティは、次の値の一覧のうち一つのキーワードで指定します。 -<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> +- `auto` + - : スクロールの末端における既定の振る舞いが通常通りに発生します。 +- `contain` + - : この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。 +- `none` + - : 隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<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> +<h3 id="Preventing_block_overscrolling">ブロック方向のオーバースクロールの抑止</h3> -<p>このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と <code>height</code>) が小さく、ビューポート内にきちんと収まりますが、内容は広い <code>height</code> を持つため、垂直にスクロールします。</p> +このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い `height` を持つため、垂直にスクロールします。 -<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに <code>overscroll-behavior-block: contain</code> を設定しました。</p> +既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-block: contain` を設定しました。 -<h4 id="HTML">HTML</h4> +#### HTML -<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> +```html +<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> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">main { +```css +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 { +main > div { height: 300px; width: 400px; overflow: auto; @@ -89,7 +92,7 @@ main > div { overscroll-behavior-block: contain; } -div > div { +div > div { height: 1500px; width: 100%; background-color: yellow; @@ -104,37 +107,21 @@ p { position: relative; top: 10px; left: 10px; -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}</p> +{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}} -<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> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.overscroll-behavior-block")}}</p> +{{Compat}} -<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> +- [スクロールを制御する: 引いて更新や末端の効果のカスタマイズ](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo) |