blob: b7085ef5dbece768ee058b066ab562905418533e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: '-webkit-overflow-scrolling'
slug: Web/CSS/-webkit-overflow-scrolling
tags:
- CSS
- CSS プロパティ
- 標準外
- リファレンス
- recipe:css-property
browser-compat: css.properties.-webkit-overflow-scrolling
translation_of: Web/CSS/-webkit-overflow-scrolling
---
{{CSSRef}} {{Non-standard_header}}
`-webkit-overflow-scrolling` は [CSS](/ja/docs/Web/CSS) のプロパティは、指定された要素で惰性付き (momentum-based) スクロールを使用するかどうかを制御します。
## 構文
### 値
- `auto`
- : 「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。
- `touch`
- : 惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## 例
### 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 */
}
```
### 結果
{{EmbedLiveSample('Examples')}}
## 仕様書
仕様書では定義されていません。 Apple には [Safari CSS Reference に説明](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)があります。
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [CSS-Tricks article with demo](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)
- [Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/)
- [Safari 13 Release notes](https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes): すべてのフレームと `overflow:scroll` 要素に、一本指による高速スクロールの対応が追加され、`-webkit-overflow-scrolling: touch` を設定する必要がなくなったことを示しています。
|
