mizulba
約1年前
0
CSSで@supportsを使ったOS別スクロールバー制御のTips
CSS
知識
scrollbar-widthプロパティと@supportsを組み合わせることで、OS別にスクロールバーの表示を制御できる。
基本的な仕組み：
- scrollbar-widthプロパティはFirefox/Chrome/Edgeの新しいバージョンでサポートされる
- WindowsのブラウザはWebkit系のスクロールバースタイルをサポートするが、scrollbar-widthは未サポートの場合が多い
- Mac/Linuxのブラウザはscrollbar-widthをサポートする傾向がある
実装例：
css
/* 基本スタイル（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判定ではなく、ブラウザの機能サポート状況による判定となる。