css:スマートフォンのスクロールバー

単にoverflow:autoの指定だけではスマートフォンでスクロールバーが表示されない問題

例ではクラス名は .scroll-bar を指定している
※各自の設定で変更の必要あり
webkit系のみ有効だが、safari, chromeで有効なので概ねカバーできるのだろう。

.scroll-bar{overflow-x:scroll;}
.scroll-bar img{max-width:initial;}

.scroll-bar::-webkit-scrollbar{height:10px;}
.scroll-bar::-webkit-scrollbar-track{background:#dddddd;}
.scroll-bar::-webkit-scrollbar-thumb{background:#2cc2e4;}

なぜかこの指定をしてもうまく表示されない事が多々あった。
何度か細かく指定しなおして(原因が不明だが)うまく表示された。

こちらのサイトを参考にした

CSSを使ってスクロールバーを表示させてみました

カテゴリーcss