スクロールバーのデザイン右往左往

スクロールバーのアレンジの要望は絶えない

Mac OS X ではスクロールバーの非表示がデフォルトになっている様で、常時表示をさせる方法を書いた記事の方が検索に多くヒットする位です。 Winでは従来のオーソドックスなデザインが継承されていますが、スクロールバーのカスタマイズを望むユーザーは昔から少なく無かったでしょう。

 

ブログページのスクロールバーデザインについては、CSSでかなり昔からIE独自拡張で色々なアレンジが出来た記憶があります。 Chromeではウェブキットでアレンジの道が開かれたが、それ以上の事は余り知りません。 結局のところ、スキンで特定のブラウザの表示のみアレンジする選択しかなく、この状態はなんとかならないものかと思って来ました。

 

しかしスクロールバーに関しては、CSSで殆どのブラウザが受け入れる様な方針が一向に提示されません。 これは根の深い理由がある問題なのだろうと感じます。 ブラウザ全体で、早くこの限界を乗り越えて欲しいものです。

 

 

WebKit限定のアレンジ

そんなスクロールバーのCSSアレンジ、Chromeを専ら使っていると、やはり色々ためして見たくなります。「::-webkit-scrollbar」という形でCSS上で指定するこの手法、対応するブラウザは以下で Firefoxが非対応なのは痛いです。 まあ、他ブラウザで崩れを生じる事はなさそうで、他環境を気にしないなら採用しても良いかも。

 

 

今回、アメブロの「CSS編集用デザイン」で実装テストをしたので、覚え書き程度に書いておきます。 

 

●Chrome 以外は対応が必ずしも保障されず、テストの必要があります。

●無駄と思われた指定を省き、独自に簡素化して判り易くしました。

●各パーツで透過色を指定する場合は、結果はページ背景色にも関係します。

●このスクロールバーはブラウザ拡大率によってサイズ（幅）が変わります。

 

指定パーツと修飾内容

（●は必須項目で無いと他も無効となる。 ▲印は非対応のブラウザがあります）

   指定パーツ  セレクタ表記  プロパティ
●  縦スクロールバー（幅）  ::-webkit-scrollbar  width
▲  横スクロールバー（幅）  ::-webkit-scrollbar:horizontal  height
   スクロールバー軌道（色）  ::-webkit-scrollbar-track  background
▲  軌道のコーナー（色）  ::-webkit-scrollbar-corner  background
   移動タブ（色・角丸み）  ::-webkit-scrollbar-thumb  background
 border-radius

 

セレクタと実際のパーツの関係

 

 

実際のサンプル

▪角の丸いスクロール移動タブ、移動タブや軌道は透過色。

▪軌道が交差するコーナーは、軌道と同色にして目立たせない。

▪縦方向スクロールバーは、幅4pxと狭く設定してマウスホイール操作を前提。

　これは画面右端に必ず表示される軌道跡を目立たなくする意味もあります。

▪横方向は「Shift」を使える人は少ない可能性があり、幅を12pxと拡めに設定。

 

この設定を実際のスキンに貼れるCSSコードとしたものが以下です。

 

/* Chromeでスタイリッシュなスクロールバー */
/* ◎縦スクロールバー（幅）*/
::-webkit-scrollbar {
	width: 4px; }

/* 横スクロールバー（幅）*/
::-webkit-scrollbar:horizontal {
	height: 12px; }

/* ◎スクロールバー軌道（色）*/
::-webkit-scrollbar-track {
	background: rgba(0, 72, 72, 0.2); }

/* 軌道のコーナー（色）*/
::-webkit-scrollbar-corner {
		background: rgba(0, 72, 72, 0.2); }

/* ◎移動タブ（色・角丸み）*/
::-webkit-scrollbar-thumb {
	background: rgba(45, 90, 100, .5);
	border-radius: 12px; }

 

下は、コードを実際にスキンに追記した状態（ブラウザ拡大率100%）です。

 

 

❶ 軌道に透過色を指定した場合に、ヘッダーの欠けが生じる様です。 この欠け幅は縦スクロールバー幅と等しくなります。（これは透過色の場合だけに生じる問題）

 

対策として以下のコードで、ヘッダーの幅を拡げる事で、欠けがなくなります。 このコードは縦スクロールバー幅と4pxの場合で、またブログ画面のアメブロヘッダーのみに対応したものです。

 

#ambHeader {
    width: calc(100% + 4px); }

 

❷「人気の記事」の「× close」ボタンが横スクロールバー起動の上に表示されてしまいます。 これはアメブロならではの問題ですが、「人気の記事」の表示・非表示に係らず、この様になります。「人気の記事」の表示・非表示のどちらの場合でも対応出来る様に、「× close」ボタンの位置を少し下げました。

 

._1QmjcVT4 {
	bottom: -12px; }

 

下は ❶ ❷ の対策を追加した結果です。

 

 

「人気の記事」の表示を選択している場合は、下の様になります。

 

 

CSS編集用デザインを使用していて、スクロールバーのアレンジをしたいと思う方は、参考にしてください。