-webkit-overflow-scrolling
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
-webkit-overflow-scrolling
は CSS のプロパティは、指定された要素で惰性付き (momentum-based) スクロールを使用するかどうかを制御します。
構文
値
公式定義
初期値 | 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
関連情報
- CSS-Tricks article with demo
- Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers
- Safari 13 Release notes: すべてのフレームと
overflow:scroll
要素に、一本指による高速スクロールの対応が追加され、-webkit-overflow-scrolling: touch
を設定する必要がなくなったことを示しています。