要はIEやFirefoxでは非対応であり、iPhone Safariでも表示されないですよ、という話です。
cssのみでデザインされたスクロールバーを実装する際は注意が必要です。
実際のものをブラウザごとに見ていただくのが早いかと思います。
今回実装したスクロールバー
デモページ:https://hojihoji.net/scrollBar/
::-webkit-scrollbar で実装
スクロールバーの実装には::-webkit-scrollbarというcssを用いています。
cssのみでデザインされたスクロールバーを実装することができる便利なものです。
参考サイト:https://qiita.com/hibikikudo/items/ee1b913479bceddb654c
問題点
JavaScriptいらずで実装できるため、とても便利なものですが、
使用には慎重になった方が良いです。
なぜならIEやFirefoxでは非対応のため、
標準のスクロールバーが表示されてしまうからです。
せっかくデザインにこだわった実装なのに、意味がなくなります。
ios13で表示されない?
またiPhone Safariで表示されない(標準のものが表示されます)という問題もあります。
::-webkit-scrollbarは、webkit系のブラウザには対応しています。
参考サイト:https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#Browser_compatibility
ですのでiPhone Safariでも表示されるはずなのですが、
iOS13から表示されなくなったようです。
参考サイト:
https://qiita.com/kakuta_yu/items/626d7feecf54e39f7127
https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/
まとめ
デザインされたスクロールバーを実装する場合は、
IEやFirefox、iPhone Safariなどでは標準のものが表示されるという認識で実装する。