CSS（::-webkit-scrollbar）を使うとスクロールバーのデザインができるという事なので実際にやってみました。
スマホサイトを作る際、横長の画像やテーブルが画面に収まりきらない場合に、収まりきらなかった部分を左右にスワイプして見れるように設定する事があると思います。
<div class="scroll"> <img src="./images/xxx.jpg"> </div>
.scroll{overflow-x:scroll}
ためしに写真の上にカーソル（スマホの場合は指）を移動させてスクロールしてみてください。
しかしスクロールバーが表示されないブラウザではスクロールできる事に気付かない場合があると思います。それどころか「途中で切れてしまって見栄えが悪い」と思われる事だってあるかもしれません。
そこで「::-webkit-scrollbar」を使ってスクロールバーを表示させてみたいと思います。お察しのとおりWebkit系のブラウザでしか動作しませんが、iPhoneとAndroidの標準ブラウザに対応しているので実用性は十分です。PCから確認する場合は「Chrome・Safari・Opera等」でご確認ください。
.scroll{overflow-x:scroll;}
.scroll::-webkit-scrollbar{height:10px;}/*バーの太さ*/
.scroll::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
.scroll::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/
縦スクロールの場合は、バーの太さを「width」にします。
.scroll::-webkit-scrollbar{width:10px;}/*バーの太さ*/
他にもいろいろな設定ができますが、最低限これだけ覚えればシンプルでおしゃれなスクロールバーを表示する事ができます。
スマホサイトでは画像が画面内に収まるように、幅を「max-width:100%」に設定する場合が多いと思います。そうすると横長の画像まで画面内に収まってスクロールできなくなるので、「max-width」をリセットする必要があります。
.scroll img{max-width:initial}
このようにすればスクロールしたい画像の部分だけ「max-width」がリセットされます。
スマホで見たとき、スクロールする動きに加速・減速のエフェクトを加えた、いわゆるスムーススクロール的な動きにする事もできますが、スクロールバーは表示されなくなってしまいました。共存はできないのでしょうか。
.scroll{-webkit-overflow-scrolling:touch;}