From 75c9efb03dd63fb59adde624552b6d4d04e178d7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 01:34:23 +0900 Subject: CSS 論理的プロパティのその他プロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/overscroll-behavior-inline/index.html | 140 --------------------- 1 file changed, 140 deletions(-) delete mode 100644 files/ja/web/css/overscroll-behavior-inline/index.html (limited to 'files/ja/web/css/overscroll-behavior-inline/index.html') diff --git a/files/ja/web/css/overscroll-behavior-inline/index.html b/files/ja/web/css/overscroll-behavior-inline/index.html deleted file mode 100644 index 278f5b3da8..0000000000 --- a/files/ja/web/css/overscroll-behavior-inline/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: overscroll-behavior-inline -slug: Web/CSS/overscroll-behavior-inline -tags: - - CSS - - CSS Box Model - - CSS Logical Properties - - CSS Property - - NeedsExample - - Reference - - overscroll-behavior-inline - - 'recipe:css-property' -translation_of: Web/CSS/overscroll-behavior-inline ---- -
{{CSSRef}}
- -

overscroll-behavior-inline は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。

- -

全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

- -
/* キーワード値 */
-overscroll-behavior-inline: auto; /* default */
-overscroll-behavior-inline: contain;
-overscroll-behavior-inline: none;
-
-/* グローバル値 */
-overscroll-behavior-inline: inherit;
-overscroll-behavior-inline: initial;
-overscroll-behavior-inline: unset;
-
- -

構文

- -

overscroll-behavior-inline プロパティは、次の値の一覧のうち一つのキーワードで指定します。

- -

値

- -
-
auto
-
スクロールの末端における既定の振る舞いが通常通りに発生します。
-
contain
-
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。
-
none
-
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

インライン方向のオーバースクロールの抑止

- -

このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。

- -

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-inline: contain を設定しました。

- -

HTML

- -
<main>
-  <div>
-    <div>
-      <p><code>overscroll-behavior-inline</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>
- -

CSS

- -
main {
-  height: 400px;
-  width: 3000px;
-  background-color: white;
-  background-image: repeating-linear-gradient(to right, 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-inline: contain;
-}
-
-div > div {
-  height: 100%;
-  width: 1500px;
-  background-color: yellow;
-  background-image: repeating-linear-gradient(to right, 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: 360px;
-  position: relative;
-  top: 10px;
-  left: 10px;
-}
- -

結果

- -

{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}{{Spec2('CSS Overscroll Behavior')}}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.overscroll-behavior-x")}}

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf