This page was translated from English by the community. Learn more and join the MDN Web Docs community.

-webkit-overflow-scrolling

非標準

この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

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

初期値auto
適用対象スクロールするボックス
継承あり
計算値指定通り
アニメーションの種類離散値

値

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

形式文法

auto | touch

例

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 */
}

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報