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

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

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

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

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

---

##現在の状況

CSSの[::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar)を使用して、できるかぎりスタイルを近づけてみました。


**CodePen**

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="h40831" data-slug-hash="ExPrWwx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="スクロールバーのデザインをMacのGoogleChrome風に変更したい！">
  <span>See the Pen <a href="https://codepen.io/h40831/pen/ExPrWwx">
  スクロールバーのデザインをMacのGoogleChrome風に変更したい！</a> by SE(すみエンジニア) (<a href="https://codepen.io/h40831">@h40831</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```css: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](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar)を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*が消えない
背景色は消せましたが、要素の高さが消えないせいでスクロールバーが最下部までスライドしないようになっています。