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
#考察
- iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる
- iOS13から慣性スクロールがデフォルトになった
- デフォで慣性スクロールなので::-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」と記述しましたが、うまくいきませんでした。