2021-12-19

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

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

Article Image

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

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

picture 1

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

picture 2

なぜ余白が必要?

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

picture 3

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

このようにスクロールバーに::-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は効果がある。

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

picture 4

「左右」の余白

恐らく最も難解な部分。

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

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;
    },

上と違うのは::-webkit-scrollbar-thumb側のボーダーを設定しているという所。

transparentは必須なので消さないように。

またbackground-clipというCSSを利用するという点。

こちらbackground-clip: padding-boxの意味は「ボーダーが定義されている箇所の背景はカットする」というもの。

少々難解なので覚える必要はなく適宜別サイトを検索してもらえればよいかと思う。

picture 5

このコードにより左右にも余白が入った。

スクロールしにくくならない?

スクロールバーを細くしたことで「クリック(ドラッグ)できる部分が減るのでは?」という懸念があるかもしれない。

この方法なら左右の「余白部分もクリック範囲」のままとなるので殆ど使用感は変わらないはずだ。

スクロールバーの表示非表示を切り替える

マウスオーバーでスクロールバーの表示/非表示を切り替える方法を次の記事で紹介している

【MUI + CSS】Drawerのスクロールバーをマウスオーバーで表示/非表示切り替え | 謎の技術研究部

以上

この手の解説も非常に長い文章になっているサイトが多いので可能な限り短くまとめた。

今回はCSSで紹介したが前回の記事から読んでもらえればMUIを使ったReactサイトにも適用できるだろう。

【MUI】スクロルバーのデザインを変える【Gatsby.js】 | 謎の技術研究部


この記事のタグ


謎の技術研究部 (謎技研)