HTMLでのスクロールバーカスタマイズについて調べてみた。

Chrome（Electron）にて、スクロールバーのデザインをカスタマイズしたいと思い、調査してみた。

:::note alert
  この記事はChrome(128.0.6613.84)で動作確認したサンプルを添付しております。
  Webkit系以外のブラウザでCodePenのサンプルは想定通りの動作しない可能性があります。
:::


:::note warn
 スクロールのカスタマイズは現在標準化が行われており、[scrollbar-color](https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-color)、[scrollbar-width](https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-width)のCSSプロパティが利用できるようになっているが、細かいデザインができない。（ex. [border-radius](https://developer.mozilla.org/ja/docs/Web/CSS/border-radius)で丸みをつける。)
:::

:::note warn
`::-webkit-srcollbar-*`は標準化CSSプロパティに比べて細かいデザインができる。ただし、ベンダプレフィクスがついている通り、今後使用できなくなる可能性がある。[^MDN]
:::

# 調査内容
## `scrollbar-*` が設定された場合、`::-webkit-srcollbar-*` は無効になる。
CSSWG[^CSSWG]にて、議論されていたようで結論が出ている。
> RESOLVED: If either scrollbar-width or scrollbar-color are anything other than initial values, then we ignore legacy -webkit-scroll pseudos

そのため、ユーザスタイルシート、ブラウザデフォルトスタイルシートなどでこれらが設定されていた場合、基本的に`::-webkit-srcollbar-*`は無効になる。
その場合、`scrollbar-* : initial`を設定することで`::-webkit-srcollbar-*`を有効化できる。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYwrrBz" data-pen-title="Untitled" data-user="ykawakamy" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ykawakamy/pen/eYwrrBz">
  Untitled</a> by ykawakamy (<a href="https://codepen.io/ykawakamy">@ykawakamy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## `::-webkit-srcollbar-*:hover`は有効
下記のセクション参照

## `transition`, `@keyframes animation`系は無効

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEdoXBr" data-pen-title="webkit-scrollbar:animation not work" data-user="ykawakamy" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ykawakamy/pen/ZEdoXBr">
  webkit-scrollbar:animation not work</a> by ykawakamy (<a href="https://codepen.io/ykawakamy">@ykawakamy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## スクロールバーの`margin`は限定的に可能。
marginは縦スクロールであれば上下、横スクロールであれば左右のみ有効。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYVjaOR" data-pen-title="Untitled" data-user="ykawakamy" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ykawakamy/pen/zYVjaOR">
  Untitled</a> by ykawakamy (<a href="https://codepen.io/ykawakamy">@ykawakamy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

| 疑似要素                             | 概要             | カラー |  margin | padding | border |
|----------------------------------|----------------|-----|---------|---------|--------|
| ::-webkit-scrollbar              | 描画範囲、背景        | グレー | ×       | ×       | 〇      |
| ::-webkit-scrollbar-thumb        | スクロール位置        | 赤   | ×       | ×       | 〇      |
| ::-webkit-scrollbar-track-piece  | スクロール可能範囲      | 青   | 〇       | ×       | 〇      |
| ::-webkit-scrollbar-track        | track-pieceの背景 | 黄色  | 〇       | ×       | 〇      |

## スクロールバーは強制パディングとなるため、重ね合わせできない。
スクロールバーはコンテンツのパディングに含まれないが内部的には含まれている模様。（下図の緑部分参照）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/f66e33e0-3b1a-cb65-f35e-6641a8086ddf.png)
そのため、コンテンツとスクロールバーを重ね合わせて表示するようなことはできないと思われる。

ちなみにvscodeでは、Javascriptでスクロールバーを構成しているため、スクロールバーとコンテンツの重ね合わせを実現している。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169945/32bb11de-2b9d-19fe-9cad-e43443d118b2.png)


[^MDN]: https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-scrollbar 
[^CSSWG]: https://github.com/w3c/csswg-drafts/issues/9856#issuecomment-2035809422