LoginSignup
7
1

More than 3 years have passed since last update.

【CSS】iOS13, Safari13から指定なしで慣性スクロールできるようになりました。

Last updated at Posted at 2019-10-09

背景

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~のようなので、旧バージョンの対応をしつつ、シェア状況をみて記述を省略、みたいにすると良さそうですね。

7
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1