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

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

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

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

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

---

##現在の状況

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

CodePen

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

css

.after::-webkit-scrollbar {
    width: calc(.6rem + 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: solid transparent;
    background-clip: content-box;
    border-width: 1px 2px;
}

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

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

###*::-webkit-scrollbar
####効かないプロパティ
margin padding position transform: translateX display: block float

####効いたプロパティ
width
scrollbar-thumbの幅と、左にずらしたい長さの合計値です。

---

###*::-webkit-scrollbar-thumb
####効かないプロパティ
margin padding position transform: translateX display: block opacity

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

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

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

---

###*::-webkit-scrollbar-track
####効かないプロパティ
margin-left margin-right padding position transform: translateX display: block

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

---

###*::-webkit-scrollbar-corner
####効かないプロパティ
margin position transform: scale height width

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

---

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

###FireFox非対応
MDN web docsをGoogle翻訳にかけた結果、

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

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

---

###適切な幅がわからない
scroll-thumbの幅（の調整のために指定するscrollの幅）の適正な値がわかりません。
現状ビューポートの幅（＝本家のscroll-thumbの幅）が変わるたびに調整しなおしていますが、一発指定したらピッタリ合致するような値を模索したいです。
→ .6remで指定してみたところ、DOMのサイズが変わっても本家に近い幅が再現できているような気がします。もし大きく違った場合は、コメントでお知らせください。

---

###スクロールバーの奥にある要素が表示されない
本家はスクロールバーの奥にある要素も表示されますが、
今回のやり方だとスクロールバーの奥にある要素は表示されません。

---

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

---

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