【CSS】スクロールバーのデザインをMacのGoogleChrome風に変更したい！【みんなでチャレンジ】

みなさん、スクロールバーは好きですか？
わたしは１本満足バーと同じくらい好きです。
そのなかでも、MacのGoogleChromeのスクロールバーのデザインが一番好きです！
すべてのブラウザのスクロールバーを、MacのGoogleChromeと同じデザインにしたいッ！！

…ということで、主要ブラウザのスクロールバーのデザインをMacのGoogleChrome風にするチャレンジに挑戦してみました！

しかしながら、私ひとりのチャレンジ結果では、まだまだ本家と似ても似つきませんでした！
まだまだ改善点はたくさんあるので、是非みなさまもチャレンジしてみていただけないでしょうか！？
結果報告のコメントをお待ちしております！

※ iPhoneのスクロールバーもほとんど同じデザインなので、Macをお持ちでない方はそちらを参考にしてください。

現在の状況

CSSの::-webkit-scrollbarを使用して、できるかぎりスタイルを近づけてみました。

CodePen

See the Pen スクロールバーのデザインをMacのGoogleChrome風に変更したい！ by SE(すみエンジニア) (@h40831) on CodePen.

.after::-webkit-scrollbar{width:calc(1%+2px);}.after::-webkit-scrollbar-track{margin:1px;}.after::-webkit-scrollbar-corner{display:none;}.after::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.5);border-radius:100px;border:solidtransparent;background-clip:content-box;border-width:1px2px;}

以下、解説です。
便宜上、モデルとなったMacのGoogleChromeのスクロールバーのことを「本家」と呼ばせていただきます。

※ 不要な要素について
scrollbar-buttonのように非表示にしたい要素もありましたが、
scrollbar関連のスタイルを指定した時点で非表示になるようですので、
display: noneなどの記述は必要ないようです。

*::-webkit-scrollbar

効かないプロパティ

marginpaddingpositiontransform: translateXdisplay: blockfloat

効いたプロパティ

width
scrollbar-thumbの幅と、左にずらしたい長さの合計値です。

*::-webkit-scrollbar-thumb

効かないプロパティ

marginpaddingpositiontransform: translateXdisplay: blockopacity

効いたプロパティ

background
背景色を黒にして、色を半透明にしています。
opacityは効かないようなので、必ずrgba()で指定する必要があります。

border-radius
scroll-thumbの線端を丸くしています。
相対値で指定すると、線幅が丸くなるのではなく楕円形になってしまうので、適当に大きな値を絶対値で指定しています。

border
positionmarginpaddingtransform: translateXなどの位置をずらすようなプロパティでは、display属性をいじってみてもビクともしなかったので、しかたなく透明のborderで見た目上の位置を調整しています。

*::-webkit-scrollbar-track

効かないプロパティ

margin-leftmargin-rightpaddingpositiontransform: translateXdisplay: block

効いたプロパティ

margin-topmargin-bottom
scrollbar-thumbに適用したborder-widthの影響により、
スクロールバーが最上部or最下部に達したときの余白に違和感ができてしまいました。
幸い、上下の余白が指定できたので、こちらで調整することにしました。

*::-webkit-scrollbar-corner

効かないプロパティ

marginpositiontransform: scaleheightwidth

効いたプロパティ

display: none
背景色のみ消え、要素の高さは消えないという中途半端な結果になりました。

今後の課題

私のチャレンジでは、まだまだ本家と似ても似つきません。
具体的には、以下のような課題があります。
みなさまのチャレンジによって成長させていきたいので、どしどしコメントお待ちしてます！

FireFox非対応

MDN web docsをGoogle翻訳にかけた結果、

::-webkit-scrollbarは、BlinkベースおよびWebKitベースのブラウザー（Chrome、Edge、Opera、Safari、iOS上のすべてのブラウザーなど）でのみ使用できます。

とのことなので、このやり方だとFireFoxやIEには対応できないようです。
しかしまあ、ほとんどの主要ブラウザには対応しているようなので、
他の課題と比べたら些細なことかもしれません。

適切な幅がわからない

scroll-thumbの幅（の調整のために指定するscrollの幅）の適正な値がわかりません。
現状ビューポートの幅（＝本家のscroll-thumbの幅）が変わるたびに調整しなおしていますが、一発指定したらピッタリ合致するような値を模索したいです。

スクロールバーの幅が他要素に影響している

本家はスクロールバーの幅が浮いており、他要素のサイズの演算に影響を与えないようになっていますが、
今回のやり方だとガッツリ他要素に影響がでています。

非アクティブ時に消えない

本家は非アクティブ時にスッと非表示になるのでとってもスマートですが、今回のやり方ではその挙動を再現できませんでした。
*::-webkit-scrollbar-thumb:activeにスタイルを当ててみると、スクロールバーをクリックして操作しているときにはスタイルが適用されましたが、キーボードやマウスのホイールで操作している時にはスタイルが適用されないようです。

scroll-cornerが消えない

背景色は消せましたが、要素の高さが消えないせいでスクロールバーが最下部までスライドしないようになっています。