スクロールバーのカスタムで詰まった話

こんにちは。
今回は、
ブラウザ等でよく見かけるスライドバー

これをカスタムしたいと思ったのですが、
検索してでてくる、
::-webkit-scrollbarやら::-webkit-scrollbar-thumbやら
::-webkit-scrollbar-trackでカスタムできるっぽいのですが、
ちょっと躓いたので、簡単に解決方法を書いておきます。

問題点 ::-webkit-scrollbar　が効かない
解決方法：::-webkit-scrollbar-thumb　も書く

問題点 ::-webkit-scrollbar　が効かない

試しに以下のようにsaasで設定してみました。

.body {
    overflow: auto;

    &::-webkit-scrollbar {
        width: 8px;
    }
  
}

がスクロールバーが消えただけ。
え？効かない。
ここで記法が違うのかとか、
開発者ツールには表示されているかとかを考え始めましたが、
答えは簡単でした。

解決方法：::-webkit-scrollbar-thumb　も書く

どうやら、
スクロールバーをカスタムするには
::-webkit-scrollbarと、
::-webkit-scrollbar-thumb
両方の記述が必要みたいです。

.body {



    overflow: auto;

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: black;  /* ハンドルの背景色 */
        border-radius: 6px;  /* ハンドルの角の丸み */
    }

}

こうすると、