scrollbar-widthプロパティと@supportsを組み合わせることで、OS別にスクロールバーの表示を制御できる。

基本的な仕組み：

• scrollbar-widthプロパティはFirefox/Chrome/Edgeの新しいバージョンでサポートされる
• WindowsのブラウザはWebkit系のスクロールバースタイルをサポートするが、scrollbar-widthは未サポートの場合が多い
• Mac/Linuxのブラウザはscrollbar-widthをサポートする傾向がある

実装例：

/* 基本スタイル（Mac/Linux用） */
.root {
  height: 20px;
  overflow-x: auto;
  scrollbar-width: none; /* スクロールバーを非表示 */
}

/* Windows用の調整 */
@supports not (scrollbar-width: none) {
  .root {
    height: 28px; /* スクロールバー分の高さを考慮 */
    padding-top: 6px;
    padding-bottom: 2px;
  }
}

/* Webkit系ブラウザのスクロールバースタイル（主にWindows） */
.root::-webkit-scrollbar {
  height: 4px;
}

.root::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

この方法により、JavaScriptを使わずにCSSのみでOS別の表示制御が可能。ただし、厳密なOS判定ではなく、ブラウザの機能サポート状況による判定となる。