疑似フレームで慣性スクロール

『今日のお知らせ』とか『○○情報』みたいな感じでスクロールバーを付けた疑似フレームを使用する場面ってよくありませんか？
その時のスクロールバーですが、パソコンから見る際には特に気になりませんが、iOSデバイスや一部のAndroid等で見ると、スクロール動作がぎこちない場合があります。

最近レスポンシブデザインで、スマホ用にメニュー部分をこさえた時でした。
普通なら指でスッスッと動かすと、スムーズにスクロールする慣性スクロールが働くのですが、div要素等にスタイルシートでoverflow: scroll;を設定した際、慣性スクロールが働かず、指を離した時にピタッと止まってしまい、なんだかぎこちないなぁと感じました。

慣性スクロールじゃないケース

中に用意したフレーム内をスマホから指でスクロールしてみて下さい。
スクロールする度にピタッと止まってしまいます。
iOSデバイスのみ。新しいAndroid等は、特に何もしなくても慣性スクロールが働くようです。

[codepen_embed height=”282″ theme_id=”0″ slug_hash=”PZwwvz” default_tab=”result” user=”Regless”]See the Pen overflow (通常スクロール) by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

Androidは？

Androidの場合は特に何も指定しなくても慣性スクロールが働くようです。
僕のAndroid4.2.2では普通に慣性スクロールでした。

-webkit-overflow-scrollingを使う

どうやら、iOSの仕様みたいで、疑似フレーム(div要素等にoverflow: scroll;を指定した状態)には慣性スクロールが働かない様です。
また、Androidの場合、古いバージョンはわかりませんが、最近のでしたら特に何も指定しなくてもスルスルッとスムーズなスクロールになるようです。

そんな時は、-webkit-overflow-scrolling: touch;を当てると解消！

[codepen_embed height=”312″ theme_id=”0″ slug_hash=”XXJbNO” default_tab=”result” user=”Regless”]See the Pen overflow (慣性スクロール) by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

どうですか？最初の例と違い、中のフレームもスムーズにスクロールするようになったと思います。
もしスクロール自体出来ないよ！という方は一旦、『css』ボタンを押してから再度『Result』ボタンで切り替えをし、右下の『Return』を押してからやってみて下さい。

このプロパティに設定出来る値は、有効＆無効の2種類あります。

touch

慣性スクロールを有効

auto

慣性スクロールを無効 (初期値)

iOS8に注意！

ただ、こちらの指定をする事で、iOS8の場合特定の条件が重なると要素自体が表示されないという不具合があるそうです。

また、iphone4等のCPUが弱いデバイスの場合、負荷が大きく処理が重くなる可能性もあるようなので、追加で色々とごにょごにょしてあげないといけない面があるかもしれません。

まとめ

とても便利なiOS用プロパティですが、やはり用法・容量に注意して使う必要がありそうです。

最低限自分のデバイスでは問題ないかくらいの確認は、しっかり行ないましょうね！