Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

 

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