From 3749b3f9c22c5ca41293cf770cfb6aab216e3ead Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 02:16:00 +0900 Subject: CSS 論理的プロパティに関するその他のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/16 時点の英語版に同期 --- .../ja/web/css/overscroll-behavior-inline/index.md | 118 +++++++++------------ 1 file changed, 53 insertions(+), 65 deletions(-) (limited to 'files/ja/web/css/overscroll-behavior-inline') diff --git a/files/ja/web/css/overscroll-behavior-inline/index.md b/files/ja/web/css/overscroll-behavior-inline/index.md index 30ee73ab8f..2f63ef315a 100644 --- a/files/ja/web/css/overscroll-behavior-inline/index.md +++ b/files/ja/web/css/overscroll-behavior-inline/index.md @@ -4,21 +4,23 @@ slug: Web/CSS/overscroll-behavior-inline tags: - CSS - CSS ボックスモデル - - CSS Logical Properties - - CSS Property + - CSS 論理的プロパティ + - CSS プロパティ - NeedsExample - - Reference + - リファレンス - overscroll-behavior-inline - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.overscroll-behavior-inline translation_of: Web/CSS/overscroll-behavior-inline --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

+全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overscroll-behavior-inline: auto; /* default */
 overscroll-behavior-inline: contain;
 overscroll-behavior-inline: none;
@@ -26,60 +28,62 @@ overscroll-behavior-inline: none;
 /* グローバル値 */
 overscroll-behavior-inline: inherit;
 overscroll-behavior-inline: initial;
+overscroll-behavior-inline: revert;
 overscroll-behavior-inline: unset;
-
+``` -

構文

+## 構文 -

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

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

値

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

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

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

+

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

-

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

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

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

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

HTML

+#### 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>
+```html +
+ 
+   
+     

overscroll-behavior-inline 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.

+   
+ 
+
+``` -

CSS

+#### CSS -
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 {
+main > div {
   height: 300px;
   width: 400px;
   overflow: auto;
@@ -89,7 +93,7 @@ main > div {
   overscroll-behavior-inline: contain;
 }
 
-div > div {
+div > div {
   height: 100%;
   width: 1500px;
   background-color: yellow;
@@ -104,37 +108,21 @@ p {
   position: relative;
   top: 10px;
   left: 10px;
-}
+} +``` -

結果

+#### 結果 -

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

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

仕様書

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

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [スクロールを制御する: 引いて更新や末端の効果のカスタマイズ](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo) -- cgit v1.2.3-54-g00ecf