17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iPhone Safariなのに、::-webkit-scrollbarが使えない...!

Last updated at Posted at 2020-01-15

iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。
デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。

#2020/03/12 追記
スクロールバーの非表示はできました。
もしかして使えるようになった?

色やサイズなどのスタイル変更は未確認です。

記述したコード

.container::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}

環境

  • iPhone XS
    • iOS 13.3.1

#参考URL
・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう
https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/

・慣性スクロール実装でスクロールバーは常に表示できない?
https://fantastech.net/scroll-bar

・iOS デフォで慣性スクロールできるようになった?
https://qiita.com/cubkich/items/d192a70856e8bc63c7bc

#考察

  1. iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる
  2. iOS13から慣性スクロールがデフォルトになった
  3. デフォで慣性スクロールなので::-webkit-scrollbarが使えなくなる

参考URLから察するに、これが原因と思われる。

#解決策(模索中)
「iOS13から慣性スクロールがデフォルトになった」のはAppleの公式発表から読み取れる。

Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set-webkit-overflow-scrolling: touch.

Safari 13 Release Notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682

「-webkit-overflow-scrolling: touch」を記述しなくても慣性スクロールになるなら、
これを打ち消せば「::-webkit-scrollbar」が使えるのでは...??

「-webkit-overflow-scrolling: auto」と記述しましたが、うまくいきませんでした。

17
10
0

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
17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?