2021-12-19

【CSS】::-webkit-scrollbarの上下左右に余白を作りたい

::-webkit-scrollbarはスクロールバーをデザインするCSSコードだが、余白のコントロールが少し特殊なので解説

`::-webkit-scrollbar`で余白をコントロールしたい

まず普通に::-webkit-scrollbarを使うと次のようになる。

この記事ではこれを次のようにする

なぜ余白が必要？

使いやすいデザインが追求されているYoutubeを見てみよう。

※わかりやすくダークモードで撮影。

このようにスクロールバーに::-webkit-scrollbarが使われており、余白も設定されている。

余白を設けたいという要求は間違っていないはずだ。

余白のコントロールはなぜ難しい？

::-webkit-scrollbarの場合「上下」と「左右」の余白で別途コントロールしないと実現できないため。

実装

実際にこのサイトで使っているCSSを例に出す。

    ::-webkit-scrollbar {
        width: 18px;
    },
    ::-webkit-scrollbar-thumb {
        background-color: #276976;
        border-radius: 8px;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        background-clip: padding-box;
    },
    ::-webkit-scrollbar-track {
        margin-top: 4px;
        margin-bottom: 4px;
    }

「上下」の余白

次の部分が「上下」を定義している。

    ::-webkit-scrollbar-track {
        margin-top: 4px;
        margin-bottom: 4px;
    }

::-webkit-scrollbar-trackはスクロールバーの背景に当たる部分を定義する箇所。

※ツマミではなくそのレールになっている部分。

ここでいくらマージンを設定しても左右の余白が作れなかったがtopとbottomは効果がある。

「上下」だけ設定すると次のようになる。

「左右」の余白

恐らく最も難解な部分。

こちらは次のフォーラムによる議論を参考にさせていただいた。

CSS vertical scrollbar padding left/right in UL possible? - Stack Overflow

具体的な実装は次の部分

    ::-webkit-scrollbar-thumb {
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        background-clip: padding-box;
    },