読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

最近のoverflow: scroll事情

CSS CSS3 iOS Web

もちろんモバイル情報です。

iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、
最近はどうなの?っていう。

overflow: scroll

対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。
ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた!すばらC!

-webkit-overflow-scrolling: touch

勘の良い人ならお気づきでしょうが、コレも使いたいですよね。
スクロールできる部分で慣性スクロールができるようになるやつです。

.carousel {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

みたいな。
ただこいつは、まだ要注意です・・。

手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、
一応こういうのもありますということで。

iOS6未満

スクロールされる部分(画面外に動いて見切れている部分)が描画されません。
画面内にスクロールしてきても見えないままですが、触ったら見えるようになります。

まあよくあるリペイント系のアレなので、無理やりGPU氏を叩き起こすことはできるみたいですが・・・。
overflow: scroll 単体だと問題ないです。

iOS5 Safari: position: relative elements disappear during scroll when using -webkit-overflow-scrolling: touch · Issue #8 · scottjehl/Device-Bugs · GitHub

その他、このプロパティを適用した要素の上に、
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でこれ書くの割とダルいので事故らないなら使いたい・・ってのが本音です。

ちなみに、なんでもいいからサンプル見たいって場合は、以下をどうぞ。
画面をスクロールしても、アドレスバーがちっさくならないはずです。

iOS Font Viewer