CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
![iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa28f4864114c4739d7f7201c6497a9f77c1e06c/height=288;version=1;width=512/http%3A%2F%2Fsterfield.co.jp%2Fadmin%2Fwp-content%2Fuploads%2F2014%2F03%2Fwebkit-scrollbar.png)