Windows環境では表示される、このようなカスタムスクロールバー。
けっこうがんばって
::-webkit-scrollbarとか
::-webkit-scrollbar-trackとか、
::-webkit-scrollbar-thumbとか、
::-webkit-scrollbar-thumb:hoverとかの疑似要素を駆使して（いったい何種類あるんだよ、、）
スクロールバーをカスタマイズできるのですが、
これらの疑似要素は、iOS端末、MacOSでは、無視され、表示されません！！
昔は表示できていたようですが、
MacOSではOSX10.9.xから、iOSではiOS13から仕様が変更され、
初期設定では自動的に表示され一定時間後に消えるようになりました。
結構前に変更があったのか。
なんでだよ、iPhone、iPad、Mac・・・
スクロールしたときのみスクロールバーが表示されるんじゃ、
初見では、そのコンテンツ範囲がそもそも「スクロールできる」ということが視覚的にわからないのではないだろうか。。
はっきり言って改悪。そしてこの改悪に今日も多くのエンジニアがこの解決に時間を取られる。
この事象に多くのエンジニアが頭を悩ませるが、それでもデザインカンプでは洗練されたスクロールバーがデザイナー様から降りてくるし（スクロールバーがiOSで無効化されるなんて誰も想像できない）、実際どうやってか、表示できているサイトもある。。じゃあやらないとね！となるわけです。
というわけで、解消方法を備忘録として記載します。
SimpleBarという発明をした猛者が全世界のエンジニアを救っています
これを使用することで、以下のような表示がiOSやMac上でも問題なく表示できます。
See the Pen SimpleBarの実装 by Naoto Yoshikawa (@nanaironanaoto) on CodePen.
やった！楽勝！
・・・と思ったら、このGithubのdemo pageを見ると、
上の例のような横スクロールのデモが紹介されていない！？
なぜか縦スクロールのデモで、いやいや、縦スクロール時のバー表示はあんまり要らないんだわ・・・と思うことでしょう。
多くのSimpleBarの紹介記事は説明不足！！
また、上の例のように、細かい配慮として、左右のスクロール端の画像やテキストがフェードアウトしていく画像処理も、自力で付け足さなければいけない。
僕が作成した上のCodePenのHTMLとCSSを使えば、やっとほんとに解決すると思います。
解説すると、
1) まず公式のCDNで、SimpleBarのcssとjsをロード。
<!--SimpleBar-->
<link href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.css" />
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
<!--SimpleBar-->2) そしてスクロールさせたいコンテンツを以下のようにdata-simplebar属性をつけた要素で囲む。この例ではではdivで囲む。
<div data-simplebar>
ここにスクロールさせたいコンテンツ
</div>いちおうもうこれでスクロールバーは表示される。ただしデフォルトの縦スクロールバーが。
3) 横方向にスクロールさせたい場合は、
<div data-simplebar data-simplebar-auto-hide="false">というように、属性に
data-simplebar-auto-hide="false"を加える必要がある。
これで横スクロールになる。
4) が、包んでいるコンテンツがこのボックスの横幅を超えていないと、当然スクロールバーは表示されない。
だってスクロール不要なコンテンツなんだから。
ということで、cssでスタイル付けしていく必要がある。
カスタマイズするために、例えば以下のように任意のクラス名を付与。
.my-scroll-content<div class="my-scroll-content" data-simplebar data-simplebar-auto-hide="false">そのクラスに適用したスタイルは、CodePen内のcssを参照いただければと存じます。
5) そんでもって、この例のようにスクロールコンテンツの左右にフェードアウトの処理を加えるためにもひと手間かかかる。
See the Pen SimpleBarの実装 by Naoto Yoshikawa (@nanaironanaoto) on CodePen.
どうするかというと、さきほど作ったSimpleBarが表示されるスクロールコンテンツを、
さらにボックスで囲み、その直下の子要素として左と右、ふたつのボックスを作成して、それぞれのフェードアウト表示用に配置する。
<div class="custom-scroll-container">
<div class="custom-scroll-fade-left"></div>
<div class="custom-scroll-fade-right"></div>
ここにさっきのSimpleBarのボックスを配置
</div>そして
.custom-scroll-container
.custom-scroll-fade-left
.custom-scroll-fade-right
のクラスにスタイルを当てていけばようやくまともな横スクロールの表示になってくれる。
当てているスタイルはCodePenの”CSS”タブでご確認いただけます。
See the Pen SimpleBarの実装 by Naoto Yoshikawa (@nanaironanaoto) on CodePen.
6) 最後に実は落とし穴！
.scroll-content{
touch-action: auto !important; /*これをつけないとスクロール領域でiPhoneなどで縦スクロールできなくなる！*/
}スタイルで、スクロール領域内の
.scroll-contentにtouch-action:auto;をつけないと、SimpleBarのデフォルトの挙動により、
スクロール領域内ではiPhoneなどでの縦方向フリックが無効化される。
横スクロールにしているから縦にフリックが効かなくしているのだろうか。
ただ、デフォルトだと、スマホをするするスクロールしたときにこのスクロール領域でフリックができずユーザは「いや、なんでよ！？」とストレスになること請け合い。
エンジニアはこうやってサーバー上に反映したあとにさらに実機を触って入念に操作して見つけて、潰していかないと、ちょこちょこまさかの嫌な問題がでてきますね。
しかも、この件はChatGPTなどAIでも解決方法を提示できていなかった。まだ情報を知らないのだろう。かつ実機のフリック時の挙動とか、エミュレータではわからないことだし細かすぎる。
手間をかけないといいものが作れないようにできているってことか。。
いやー、横スクロールバーいっこちゃんとデザインするだけでどんだけかかるんだ！
これはCodePenのコードをちゃんと備忘録してないと、毎回記憶を頼りにしてたら面倒すぎる！！記事が書けてよかったー、これで安心。。
以上です！