Blog

iPhoneやAndroidのサイトでスクロールバーをカスタマイズ

CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、

iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、

スクロールは可能なのですが、スクロールバーが表示されません。

そのままでは、そこがスクロール可能であるということがわかりづらく、

サイトとして使いづらくなってしまう可能性が高くなります。

 

なんとか解決策はないかと探していたところ、

Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、

その方法についてご紹介いたします。

 

↓こちらがデモです(ChromeもしくはSafariにてご覧下さい)

DEMO

 

方法

スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundとborder-radiusとなります。

-webkit-scrollbarの説明

横方向のスクロールバーを別で指定する場合には、:horizontal疑似クラスを設定することで可能となります。

また、スクロールバーの動く部分(scrollbar-thumb)の前の部分は:start疑似クラス、後ろの部分は:end疑似クラスにて設定が可能です。

例:

こちらのサイト(→WebKitを使ってスクロールバーをカスタマイズ)で、より詳しい説明をしていただいてました。

 

あまり細かな設定はできませんが、スクロールバーの存在を示す場合には十分に使うことができるので、

Webkitの利用が多いスマートフォンサイトなどでは実用としても利用できると思います。

 

参考サイト

Webkit独自拡張でスクロールバーのデザインを変更する

WebKitを使ってスクロールバーをカスタマイズ

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ