Chromeで-webkit-scrollbarが効かなくなった件と対処法【CSS】

こんにちは！コーダーのゆうしです。

以前はChromeで -webkit-scrollbar を使えばスクロールバーのデザインを自由にカスタマイズできていましたが、ある時期からChromeのバージョンによっては効かなくなるケースが出てきました。この記事では原因と対処法、そして現在推奨されている scrollbar-color と scrollbar-width を使った方法を解説します。

-webkit-scrollbarとは？

-webkit-scrollbar はWebkitベースのブラウザ（Chrome・Safari・Edgeなど）でスクロールバーのデザインをカスタマイズできるCSSの疑似要素です。以下のように使います。

/* スクロールバー全体 */
::-webkit-scrollbar {
  width: 8px;
}

/* スクロールバーのトラック（背景） */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* スクロールバーのつまみ */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* つまみのホバー時 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

効かなくなった原因

Chromeのバージョン121（2024年1月リリース）以降、Chromeが標準仕様である scrollbar-color と scrollbar-width に対応したことで、一部の環境で -webkit-scrollbar の挙動が変わるケースが出てきました。

また scrollbar-width: none でスクロールバーを非表示にしていた場合、-webkit-scrollbar の指定が上書きされて効かなくなることがあります。

Chromeの方針として、今後は標準仕様のプロパティを優先する方向に進んでいるため、-webkit-scrollbar に頼り続けるのはリスクがある状況になっています。

対処法① -webkit-scrollbarを残しつつ標準仕様も追加する

現状の一番無難な対応は -webkit-scrollbar と標準仕様の両方を書いておくことです。

/* 標準仕様（Firefox・Chrome121以降） */
.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Webkit系ブラウザ向け（Chrome・Safari・Edge） */
.scroll-area::-webkit-scrollbar {
  width: 8px;
}

.scroll-area::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

標準仕様を上に書いておくことで、対応しているブラウザでは標準仕様が優先されます。

対処法② 標準仕様に移行する

今後のことを考えると、標準仕様の scrollbar-color と scrollbar-width に移行していくのがおすすめです。

scrollbar-width

スクロールバーの幅を指定します。

.scroll-area {
  scrollbar-width: auto;   /* デフォルト */
  scrollbar-width: thin;   /* 細いスクロールバー */
  scrollbar-width: none;   /* 非表示 */
}

scrollbar-color

スクロールバーのつまみとトラックの色を指定します。

.scroll-area {
  scrollbar-color: #888 #f1f1f1;
  /* scrollbar-color: つまみの色 トラックの色; */
}

2つの値を半角スペースで区切って指定します。1つ目がつまみ（thumb）の色、2つ目がトラック（track）の色です。

スクロールバーを非表示にする

スクロールバーを完全に非表示にしたい場合は以下の書き方が現在一番クロスブラウザ対応できています。

.scroll-area {
  /* 標準仕様（Firefox・Chrome121以降） */
  scrollbar-width: none;

  /* Webkit系ブラウザ向け */
  -ms-overflow-style: none; /* IE・Edge向け */
}

.scroll-area::-webkit-scrollbar {
  display: none; /* Chrome・Safari・Edge向け */
}

各プロパティのブラウザ対応状況

Firefoxは以前から -webkit-scrollbar に非対応でしたが、標準仕様には対応しているので、両方書いておくことで全ブラウザをカバーできます。

躓きやすいポイント

scrollbar-colorで細かいデザインができない

scrollbar-color で指定できるのはつまみとトラックの色だけです。-webkit-scrollbar のように border-radius でつまみを丸くするといった細かいデザインには対応していません。デザインにこだわりたい場合はSimpleBarなどのJavaScriptライブラリを使う方法も検討してみてください。

Safariのバージョンに注意

scrollbar-width と scrollbar-color はSafari 15.8以降の対応です。それより古いSafariでは効かないので、古いSafariへの対応が必要な場合は -webkit-scrollbar も残しておいてください。

scrollbar-width: noneにしてもスクロールはできる

scrollbar-width: none でスクロールバーを非表示にしても、スクロール自体は引き続き可能です。見た目上バーが消えるだけなので、スクロールを禁止したい場合は overflow: hidden を使ってください。

まとめ

Chromeで -webkit-scrollbar が効かなくなるケースが出てきた背景には、標準仕様への移行があります。現時点での対応としては -webkit-scrollbar と標準仕様の scrollbar-width / scrollbar-color を両方書いておくのが無難です。今後は標準仕様が主流になっていくので、新規プロジェクトでは標準仕様をメインにしておくことをおすすめします。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。