-webkit-overflow-scrolling

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

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

構文

auto

「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。

touch

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

公式定義

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

形式文法

Error: could not find syntax for this item

HTML

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

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

関連情報