CSS3

：

プロパティ

：

scrollbar-width

　編集：2022.07.07 by T.A.

[Edge]⛌。→●、mdn

スクロールバーの太さ。

名前	`scrollbar-width`
値	auto \| thin \| none
初期値	auto
適用対象	overflow が適用されるボックス
継承	されない
百分率	受容しない
算出値	指定されたキーワード／絶対長さ
正準的順序	文法に従う
アニメーション型	算出値の型による

このプロパティは、［要素のスクロールバーが示されるときの最大の太さを設定する］ことを、作者に許容する。

auto

実装は、既定のプラットフォームスクロールバー幅を利用するものとする。

<TEXTAREA rows=5 style="
 scrollbar-width:auto;
">あいうえおか
</TEXTAREA>

thin

実装は、適用可能なときは、auto より細いスクロールバーを利用するべきである。これは、［プラットフォームにより供されるスクロールバーの細い変種、既定のプラットフォームスクロールバーより細いカスタムスクロールバー］のどちらにもなり得る。

注記：既定では、［それ以上細くできないか、細くしても無為になるような、極小なスクロールバー］しか備えないプラットフォームもある。その事例では、実装は、この値を auto として扱ってもよい。

<TEXTAREA rows=5 style="
 scrollbar-width:thin;
">あいうえおか
</TEXTAREA>

none

実装は、スクロールバーを表示しないものとする ― しかしながら、要素のスクロール能は影響されない。【スクロールする手段がスクロールバーの他に無い環境の場合はどうなる？】

<TEXTAREA rows=5 style="
 scrollbar-width:none;
">あいうえおか
</TEXTAREA>

ユーザーエージェントは、根要素上に設定された scrollbar-width 値は、表示域に適用するものとする。

ユーザーエージェントは、WCAG 2.1 SC 2.5.5 Target Size（ターゲットのサイズ）[WCAG21] に従って、実際のスクロールバー幅に要する最小なサイズを施行するべきである。

scrollbar-width に none を利用する作者は、もっと内容があってスクロールは可能なことを視覚的にヒントする［代替／等価］な何かを供するべきである。利用者が直に操作する以外の手段により、要素がスクロールされつつある状況においては（例：プログラム的に）、作者は、none に代えて overflow: hidden 利用するべきである。

注記： overflow（および overflow-＊）プロパティと違って、HTML <BODY> 要素上に設定された scrollbar-width 値は、表示域へは伝播されない。

注記：この仕様は、スクロールバーの正確な位置や形状、そのアニメーション（fading or sliding in/out of view など）は、定義しない。

CSS3

プロパティ

scrollbar-width

関連

テスト

スクリプト：

スクリプト：