From 9d21b2eff5b3811540d818dce7f9d7df230ef2f3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 6 Dec 2021 00:26:05 +0900 Subject: 2021/12/05 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/-webkit-overflow-scrolling/index.md | 80 ++++++++++++---------- 1 file changed, 42 insertions(+), 38 deletions(-) (limited to 'files/ja/web/css/-webkit-overflow-scrolling') diff --git a/files/ja/web/css/-webkit-overflow-scrolling/index.md b/files/ja/web/css/-webkit-overflow-scrolling/index.md index 9f5655ffa1..b7085ef5db 100644 --- a/files/ja/web/css/-webkit-overflow-scrolling/index.md +++ b/files/ja/web/css/-webkit-overflow-scrolling/index.md @@ -4,49 +4,54 @@ slug: Web/CSS/-webkit-overflow-scrolling tags: - CSS - CSS プロパティ - - Reference - - WebKit 拡張 - - リファレンス - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-webkit-overflow-scrolling translation_of: Web/CSS/-webkit-overflow-scrolling --- -
{{CSSRef}} {{Non-standard_header}}
+{{CSSRef}} {{Non-standard_header}} + +`-webkit-overflow-scrolling` は [CSS](/ja/docs/Web/CSS) のプロパティは、指定された要素で惰性付き (momentum-based) スクロールを使用するかどうかを制御します。 + +## 構文 -

-webkit-overflow-scrolling は CSS のプロパティは、指定された要素で惰性付き (momentum-based) のスクロールを使用するかどうかを制御します。

+### 値 -

{{cssinfo}}

+- `auto` + - : 「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。 +- `touch` + - : 惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。 -

値

+## 公式定義 -
-
auto
-
「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。
-
touch
-
惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。
-
+{{CSSInfo}} -

形式文法

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

例

+## 例 -

HTML

+### HTML -
<div class="scroll-touch">
-  <p>
+```html
+

+  

     This paragraph has momentum scrolling
-  </p>
-</div>
-<div class="scroll-auto">
-  <p>
+  

+

+

+  

     This paragraph does not.
-  </p>
-</div>
+

+ +``` -

CSS

+### CSS -
div {
+```css
+div {
   width: 100%;
   overflow: auto;
 }
@@ -65,23 +70,22 @@ p {
 .scroll-auto {
   -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample('Examples')}}

+{{EmbedLiveSample('Examples')}} -

仕様書

+## 仕様書 -

仕様書では定義されていません。 Apple には Safari CSS Reference に説明があります。

+仕様書では定義されていません。 Apple には [Safari CSS Reference に説明](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)があります。 -

ブラウザーの互換性

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

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS-Tricks article with demo](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/) +- [Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/) +- [Safari 13 Release notes](https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes): すべてのフレームと `overflow:scroll` 要素に、一本指による高速スクロールの対応が追加され、`-webkit-overflow-scrolling: touch` を設定する必要がなくなったことを示しています。 -- cgit v1.2.3-54-g00ecf