Help us understand the problem. What is going on with this article?

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

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」と記述しましたが、うまくいきませんでした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした