背景
iPhoneでモーダルを表示するときなど、デフォルトで慣性スクロールしてくれないので-webkit-overflow-scrolling: touch
を指定して、慣性スクロールを実現させているページがありました。
ですが、fixed+慣性スクロールの掛け合わせだと、動きが止まるときがあったので指定を外しました。
そしたらoverflow-scrolling
の指定がないのにiPhoneでも慣性スクロールになっている?と思ったので、検証してみます。
検証用
See the Pen menu scroll test by かぶきち (@cubkich) on CodePen.
端末・バージョン別
iPhone7 iOS 13.1.2
私の持っている端末では、慣性スクロールが確認出来ました。
iPhone6 iOS 12.3.1
会社にある端末では、慣性スクロールの確認は出来ませんでした。
iPhone10s iOS ??.?.?
先輩の端末で見てみたら、慣性スクロールしていませんでした。
考察
もしかしたらiOS13からデフォで慣性スクロールしてくれるのかもしれない。
ただ、まだシェアがそこまで広がっていないと思うので、慣性スクロールできないことを前提に対応するべき。
かなぁ。
お使いのiPhoneでは慣性してますか?
追記 (2019/12/11)
@spaceonly さんより、以下の情報をいただきました。
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682
にて、Appleが公式に
Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set -webkit-overflow-scrolling: touch.」
(雑訳: 全てのフレームや overflow:scroll な要素に慣性スクロールのサポートを加えたことで、 -webkit-overflow-scrolling: touch を指定する必要が無くなりました )
と書いているので、確実のようです。
公式に発表されているようなので、安心して慣性スクロールができるようになったようです。
Safari 13 ships with iOS 13 and macOS 10.15. It’s also available for macOS 10.14.5 and 10.13.6.
(Google翻訳: Safari 13にはiOS 13とmacOS 10.15が付属しています。 macOS 10.14.5および10.13.6でも利用可能です。)
対象はSafari13~のようなので、旧バージョンの対応をしつつ、シェア状況をみて記述を省略、みたいにすると良さそうですね。