diff options
Diffstat (limited to 'files/ja/web/css/-webkit-overflow-scrolling/index.md')
| -rw-r--r-- | files/ja/web/css/-webkit-overflow-scrolling/index.md | 80 |
1 files changed, 42 insertions, 38 deletions
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 --- -<div>{{CSSRef}} {{Non-standard_header}}</div> +{{CSSRef}} {{Non-standard_header}} + +`-webkit-overflow-scrolling` は [CSS](/ja/docs/Web/CSS) のプロパティは、指定された要素で惰性付き (momentum-based) スクロールを使用するかどうかを制御します。 + +## 構文 -<p><code>-webkit-overflow-scrolling</code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティは、指定された要素で<ruby>惰性付き<rp> (</rp><rt>momentum-based</rt><rp>) </rp></ruby>のスクロールを使用するかどうかを制御します。</p> +### 値 -<p>{{cssinfo}}</p> +- `auto` + - : 「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。 +- `touch` + - : 惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。 -<h2 id="Values" name="Values">値</h2> +## 公式定義 -<dl> - <dt><code>auto</code></dt> - <dd>「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。</dd> - <dt><code>touch</code></dt> - <dd>惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。</dd> -</dl> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div class="scroll-touch"> - <p> +```html +<div class="scroll-touch"> + <p> This paragraph has momentum scrolling - </p> -</div> -<div class="scroll-auto"> - <p> + </p> +</div> +<div class="scroll-auto"> + <p> This paragraph does not. - </p> -</div></pre> + </p> +</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { width: 100%; overflow: auto; } @@ -65,23 +70,22 @@ p { .scroll-auto { -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ } -</pre> +``` -<h3 id="Result" name="Result">結果</h3> +### 結果 -<p>{{EmbedLiveSample('Examples')}}</p> +{{EmbedLiveSample('Examples')}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<p>仕様書では定義されていません。 Apple には <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">Safari CSS Reference に説明</a>があります。</p> +仕様書では定義されていません。 Apple には [Safari CSS Reference に説明](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)があります。 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p> +{{Compat}} -<h2 id="See_Also" name="See_Also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks article with demo</a></li> - <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Smashing Magazine- describing the effect of scroll bouncing and how it works on different web browsers</a></li> -</ul> +- [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` を設定する必要がなくなったことを示しています。 |