🍋‍🟩

[CSS]scrollbar-*はmacOSのスクロールバー設定を貫通しない

Ayuu

2024/10/30に公開

!本記事の内容はあくまで経験に基づくものです。

公式の文献等ありましたらコメントいただけると助かりますmm

 ユーザーの環境に関係なくスクロールバーを表示させたいなら-webkit-scrollbarを使用するしかなさそうスクロールバーのデザインをカスタマイズしているとき、

-webkit-scrollbar-*を使用していればmacOSのスクロールバーの設定によらず常時表示してくれるのですがscrollbar-*を使用しているとmacOSの設定に準拠してしまい常時表示されません。
サンプルコード index.html
<div>
  <h3>-webkit-scrollbar-*</h3>
  <div class="container vendor-prefix">
    <p>
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大き
    </p>
  </div>
</div>
<div>
  <h3>scrollbar-*</h3>
  <div class="container css-property">
    <p>
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大き
    </p>
  </div>
</div>
 style.css
.container {
  height: 200px;
  overflow-y: scroll;
  border: 2px solid gray;
}

.vendor-prefix {
  &::-webkit-scrollbar {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: skyblue;
  }
}

.css-property {
  scrollbar-color: skyblue transparent;
}

 macOS: 「常に表示」ユーザーがスクロールバーの設定を「常に表示」にしていればどちらの方法でも常時スクロールバーが表示されます。



 macOS: 「スクロール時に表示」ユーザーがスクロールバーの設定を「スクロール時に表示」にしているとscrollbar-*の場合、スクロールバーが常時表示になってくれません。



 なぜ？(推測)W3Cを眺めているとそれっぽい記述があった。
https://drafts.csswg.org/css-scrollbars/
User agents may disregard this value and treat it as auto, for instance when the user has indicated discomfort for thin scrollbars through some UA or OS setting. (User agents are encouraged to provide such a setting.)
ユーザーエージェントは、たとえばユーザーが何らかの UA または OS 設定を通じて細いスクロールバーを不快に感じた場合など、この値を無視して自動として扱うことがあります。(ユーザーエージェントは、このような設定を提供することが推奨されます。)
理由は不明だがこの記述を見る限り、OSの設定がscrollbar-*を無視する場合があるらしい。

が、明示的に書かれていたわけではないのでご存じの方がいましたらご教示頂きたいです!!

 各ブラウザのサポート状況と対応策今回登場した二つのプロパティですが各ブラウザによって対応が異なるので気をつけてください。

よって、スクロールバーの常時表示はfirefoxでは難しいと思われます。


Property
Chrome
Firefox
Safari


scrollbar-*
✅
✅
-

::-webkit-scrollbar-*
✅
-
✅

そのため、全てのブラウザでスクロールバーの色を変更し、尚且つ可能な限り常時表示させようとするとscrollbar-colorと-webkit-scrollbar-thumbなどを併用しなければなりません。

この時、Chromeではscrollbar-colorが優先して読み込まれるため本来可能なはずの常時表示ができなくなってしまいます。
そこで、firefoxの時のみ特定のスタイルをあてるようにします。
 style.css
.container {
  height: 200px;
  overflow-y: scroll;
  border: 2px solid gray;
- scrollbar-color: skyblue transparent; /* ここが優先して読み込まれてしまう */

  &::-webkit-scrollbar {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: skyblue;
  }

+ @-moz-document url-prefix() {
+   scrollbar-color: skyblue transparent;
+ }
}
上記のようにすることで全てのブラウザでスクロールバーの色を変更し、可能な限り常時表示することが実現可能になります。

他にも良さげな方法があったら教えてくださいmm

 おわりにCSSがいちばん難しい