スクロールバーのカスタマイズ方法

はじめに　

設定した背景色にデフォルトのスクロールバーが合わなかったので、スクロールバーをカスタマイズする方法を調べました。

環境：　　

package.json

"dependencies": {
    "react": "^18.2.0",
    "@chakra-ui/react": "^2.7.1",
    "@emotion/react": "^11.11.1",
  }

CSSの適用方法　　

ReactにCSSを適用する方法は色々あるようです。　　
今回は、Chakra UIをインストールする際、同時にインストールしたEmotionを使っての方法にしました。　　

適用例：

MyComponent.jsx

import { Text } from "@chakra-ui/react";
import { css } from "@emotion/react";

function MyComponent() {
  return (
    <Text
      css={css`
        color: red;
      `}
    >
      赤色です。
    </Text>
  );
}

スクロールバーのカスタマイズ　

WebKitベースのブラウザ（Chrome、Safariなど）と、Firefoxとで適用方法が異なります。　　

::-webkit-scrollbar や ::-webkit-scrollbar-thumb など

FirefoxとiOS以外で対応しています¹。

scrollbar-width と scrollbar-color

Firefoxで対応しています²³。

すべてのブラウザに対して共通の設定は難しいようなので、同じ項目の設定を繰り返す必要がありそうです。　　
しかし、設定内容がブラウザごとに異なるため、完全に一致させることはできないようです。　　

スクロールバーカスタマイズ例：　　

MyComponent.jsx

import { Box } from "@chakra-ui/react";
import { css } from "@emotion/react";

function MyComponent() {
  return (
    <Box
      overflowY="auto"
      css={css`
        /* Chrome, Safari, ... */
        &::-webkit-scrollbar {
          width: 7px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #718096;
          border-radius: 5px;
        }
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: #718096 transparent;
      `}
    >
      {/* 長い内容 */}
    </Box>
  );
}

各項目の説明

&::-webkit-scrollbar

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

この部分はWebKitベースのブラウザ（Google ChromeやSafari）に対してスクロールバーの幅を設定しています。

• width: 7px : これにより、スクロールバーの幅が7ピクセルに設定されます。

&::-webkit-scrollbar-thumb

&::-webkit-scrollbar-thumb {
  background-color: #718096;
  border-radius: 5px;
}

この部分は、WebKitベースのブラウザで、実際にユーザーがドラッグしてスクロールする際の「つまみ」部分（thumb）のスタイルを定義しています。

• background-color: #718096
  スクロールバーのつまみの背景色を設定しています。

• border-radius: 5px
  スクロールバーのつまみの角が丸くなり、5ピクセルの半径で丸みを帯びるよう設定しています。

Firefox用のスタイル

scrollbar-width: thin;
scrollbar-color: #718096 transparent;

Firefoxでは、scrollbar-widthプロパティを使用してスクロールバーの幅を制御します²。しかし、WebKitベースのブラウザと異なり、具体的なピクセル数での指定はできません。　　
利用できるオプションはauto（ブラウザのデフォルト）、thin、noneの3つです。

• scrollbar-width: thin
  Firefoxでのスクロールバーの幅を狭く（細く）する設定です。

• scrollbar-color: #718096 transparent
  スクロールバーのつまみとトラック（背景）の色を設定しています³。　　
  つまみは#718096に、トラックは透明に設定されています。

さいごに

ブラウザの対応状況を常に意識して情報収集する必要性を感じました。　
また、この記事を書くにあたりReactへのCSSの適用方法を改めて調べてみると、
思ったよりたくさんあったことに驚きました。
それぞれにメリットデメリットがあるようなので、実際に使って確かめてみようと思います。

1. https://developer.mozilla.org/ja/docs/Web/CSS/::-webkit-scrollbar ↩

2. https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-width ↩ ↩²

3. https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-color ↩ ↩²