CSSスクロールバージェネレーター

最新の標準プロパティ（2023年以降）

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

ブラウザ対応状況（2024年）:

• scrollbar-width: Chrome 121+、Safari 18.2+、Firefox 64+。
• scrollbar-color: Chrome 121+、Safari 18.2+、Firefox 64+。
• scrollbar-gutter: stable: Chrome 94+、Safari 14+、Firefox 97+。不要なときでもスクロールバーのスペースを確保し、レイアウトのずれを防ぎます。

webkit擬似要素（Chrome、Safari、旧Edge）

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

より細かな制御ができます。widthは縦スクロールバーの幅を、heightは横スクロールバーの高さを設定します。どちらの方向にもスクロールできるコンテナには両方を追加してください。

2つの手法をカスケードする

まず最新ルールを指定し、その後、両方をレンダリングするブラウザ向けの拡張としてwebkitを追加します:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefoxは最新のscrollbar-*ルールのみに従います。ChromeとSafariはwebkitルールに従い（これが最新ルールを上書きするため）、動作は一貫します。

scrollbar-gutterはコンテンツのずれを防ぐ

余白を確保していないと、スクロールバーが現れたときにコンテンツが再配置されます（動的なリストでよく起こります）。対処法:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

コンテンツがスクロールするかどうかにかかわらず、スクロールバーの領域が確保されます。both-edgesは反対側にも同じ余白を追加し、コンテンツを視覚的に中央に保ちます。

スクロールバーを完全に隠す

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

注意: スクロールバーを隠すと、コンテンツがスクロールできることをユーザーが認識できなくなります。明確な手がかり（矢印、ページドット）を併用する場合か、文脈からスクロール動作が明らかな場合（横型カルーセル、チャット履歴など）だけに使ってください。

モバイルでの考慮点

iOSとAndroidでは、スクロールバーはスクロール中に一瞬だけ表示されます。カスタムスクロールバーのCSSは適用されますが、ユーザーが1秒以上目にすることはないかもしれません。それを踏まえて設計しましょう。めったに現れない見た目の装飾に過度な労力をかけないことです。

アクセシビリティ

• コントラスト: つまみとトラックのコントラスト比は、非テキストのコントラストとして3:1を満たすべきです（WCAG 1.4.11）。
• 幅: 細いスクロールバーはマウスでつかみにくく、特に運動機能に制約のあるユーザーには不便です。通常の幅のほうが安全な既定値です。
• スクロール領域のスクロールバーを絶対に取り除かないでください。別のスクロール手段を用意せずに取り除くと、スクロールバーに頼るユーザーが操作できなくなります。