もちろんモバイル情報です。
iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、
最近はどうなの?っていう。
overflow: scroll
対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。
ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた!すばらC!
-webkit-overflow-scrolling: touch
勘の良い人ならお気づきでしょうが、コレも使いたいですよね。
スクロールできる部分で慣性スクロールができるようになるやつです。
.carousel { overflow: scroll; -webkit-overflow-scrolling: touch; }
みたいな。
ただこいつは、まだ要注意です・・。
手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、
一応こういうのもありますということで。
iOS6未満
スクロールされる部分(画面外に動いて見切れている部分)が描画されません。
画面内にスクロールしてきても見えないままですが、触ったら見えるようになります。
まあよくあるリペイント系のアレなので、無理やりGPU氏を叩き起こすことはできるみたいですが・・・。
overflow: scroll 単体だと問題ないです。
その他、このプロパティを適用した要素の上に、
position: absolute/fixedで何か乗せると、スクロールしてる最中、その載せた要素が消えます。
例の技を使うと、スクロール中は消えるがスクロールし終わったら表示されるようにはなります。
iOS8未満
ページがスクロールした状態で、ステータスバー(アドレスバーのさらに上の部分)をタップすると、
実はページのてっぺんにスクロールする機能があるってご存知でしたか?
なんとbody要素内でこのプロパティを使ってる要素がいるだけで、
これが機能しなくなります。
なんじゃそれー。
iOS6 Safari "scroll to top" doesn’t work when -webkit-overflow-scrolling: touch is set
iOS7ではなおった的なことが書いてあるけど、手元で見たら治ってなかったです。
その他、このプロパティを適用した要素の上に、
position: absolute/fixedで何か乗せると、スクロールにあわせてその要素が動きます。
一定の速さのスクロールなら問題ないですが、速く動かすとダメです。
必死にとどまろうとしてるけど、できてない風な挙動です。
iOS6未満だと消えてたので、まあ進歩してるっちゃーしてます。
Android
まさかの不具合見つからなかったです。
気付いてないだけってケースは大いにあります。
まとめというか
個人的にはまだ油断ならないので使いたくない・・とは思いつつ、
jsでこれ書くの割とダルいので事故らないなら使いたい・・ってのが本音です。