4
3

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.

::-webkit-scrollbarでデザインされたスクロールバーを実装するのは注意が必要です

Posted at

要は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などでは標準のものが表示されるという認識で実装する。

 

4
3
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
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?