スクロールバーのアレンジはブラウザの対応がまちまち
暗背景（全体的に暗いページ）のデザインをすると、標準的なスクロールバーは変に目立ちます。 特に前ページで扱った「動画ページ」などでは、スクロールバーのアレンジが出来るかどうかの差は大きいでしょう。
「Stylus」を使ったページアレンジは、対象ブラウザが Chrome・Firefox・Operaに限られ、実際上で私は Chrome・Firefoxを管理範囲にしています。 スクロールバーのアレンジに関して、Firefoxは全く非対応、Chromeはウェブキットでなんとか実現出来ます。 Chromeでのアレンジ方法は、以下のリンク先に纏めています。 このページ、細々ながら見に来てくれる人が尽きず、スクロールバーをアレンジしたいと思う人は多いのだと思います。
スクロールバーのアレンジは、ブラウザ・OSにより共通した方法がなく、私は最初は意図的に扱わない様にしていました。 しかし、最近はアレンジの好結果を幾つも経験し、考え方を変えました。 ブラウザ間の均質を守るより、「使える場合は積極的に効果的に使う」という事です。
透明なスクロールバートラックでの問題
スクロールバーの基盤部をトラック（scrollbar-track）と言いますが、「GYAO!」の新しいアレンジでは、このトラックを透明にしました。 下図は、透明のトラック位置を青線で示しています。
透明にしたのは、ページ右端の表示を出来るだけ邪魔したくなかったからですが、マウスで移動するタブ（scrollbar-thumb）を見失わない様に「黒」にして、黒背景の場合に沈まない様に1pxの枠を付けています。
透明なトラックで生じた問題
これらの指定は、基本的には以下のコードでOKです。
しかし、ここで問題が出て来ました。 下の様に白のトラックが表示されたのです。
透明を指定したのに何事と思ったのですが、CSSを調べるとこのページのスキンには「html {background-color: #fff; }」の指定があります。「#fff」の代わりにページ全体の背景色を指定すると下の様に着色するので、見えているのは html の地です。
この状態はどこを弄っても、トラックが透明というデザインにはなりません。 透明は諦め、せいぜいトラックを「黒」にするしかない様に思えたのですが。
唯一の方法だった「overflow: overlay」
煮詰まった頭の隅で、昔読んだ記事に何かがあったとサインが点滅しています。 思い着く語で何度か検索すると、やっとその記事が見つかりました。
以前に、やはりスクロールバーで調べた時に読んだ記事です。 このプロパティを使った以下のコードを追加すると、完全に目的通りのデザインになりました。
ページのヘッダーを始め、右端にトラックが空いた部分が表示される事がありません。 現在のCSSで、これ以外に透明なトラックを実現する方法は無いと思います。
「overflow: overlay」とはどんな指定なのか
これは図示すると判り易いです。 下はブラウザ画面の右端の断面と思ってください。
上側は、普通に「overflow: scroll;」「overflow: auto;」を指定した状態です。 この場合は、「トラック」は「html」直上に、同列の要素の「body」を押し退けて配置されます。 従って「トラック」を透明にすると「html」が露出したのです。
下側は「overflow: overlay;」の場合で、「トラック」はオーバーレイとして配置され、全ての表示要素はその下に潜り込みます。 もし「トラック」が透明でなければ、トラックの幅分が隠れます。 しかし今回の場合は「トラック」が透明なので、ブラウザ画面の端部まで表示要素が詰まって表示されます。
今回は透明化での問題でしたが、他にもスクロールバーの幅が排斥する部分を、排斥しない形に処理をしたい場合などに、必要になりそうです。