--- title: '-webkit-overflow-scrolling' slug: Web/CSS/-webkit-overflow-scrolling tags: - CSS - CSS プロパティ - Reference - WebKit 拡張 - リファレンス - 標準外 translation_of: Web/CSS/-webkit-overflow-scrolling ---
{{CSSRef}} {{Non-standard_header}}

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

{{cssinfo}}

値

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

形式文法

{{csssyntax}}

例

HTML

<div class="scroll-touch">
  <p>
    This paragraph has momentum scrolling
  </p>
</div>
<div class="scroll-auto">
  <p>
    This paragraph does not.
  </p>
</div>

CSS

div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
}

結果

{{EmbedLiveSample('Examples')}}

仕様書

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

ブラウザーの互換性

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

関連情報