非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
-webkit-overflow-scrolling
は CSS のプロパティは、指定された要素で惰性付きのスクロールを使用するかどうかを制御します。
初期値 | 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
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。