CSS3

疑似要素

::-webkit-scrollbar

[Edge]非標準。→mdn（en-US）

スクロール バーのカスタマイズ。

非標準： この機能は非標準であり、標準の軌道に乗っていません。Webに面している実稼働サイトでは使用しないでください。すべてのユーザーに対して機能するとは限りません。また、実装間に大きな非互換性があり、動作が将来変更される可能性があります。

overflow:scroll がある場合、要素のスクロール バーのスタイルに影響します。設定。

注： overflow:scroll; が設定されていない場合、スクロールバーは表示されません。

注： ::-webkit-scrollbarは、BlinkベースおよびWebKitベースのブラウザー（Chrome、Edge、Opera、Safari、iOS上のすべてのブラウザーなど）でのみ使用できます。スクロール バーのスタイルを設定する標準化された方法は、scrollbar-color と scrollbar-width で使用できます。

次の疑似要素を使用して、WebKitブラウザーのスクロール バーのさまざまな部分をカスタマイズできます。

• ::-webkit-scrollbar ― スクロール バー全体。
• ::-webkit-scrollbar-button ― スクロール バーのボタン（一度に1行ずつスクロールする上下向きの矢印）。
• ::-webkit-scrollbar-thumb ― ドラッグ可能なスクロールハンドル。
• ::-webkit-scrollbar-track ― スクロール バーのトラック（プログレスバー）。白いバーの上に灰色のバーがあります。
• ::-webkit-scrollbar-track-piece ― ハンドルで覆われていないトラックの部分（プログレスバー）。
• ::-webkit-scrollbar-corner ― 水平スクロール バーと垂直スクロール バーの両方が出会うスクロール バーの下隅。これは多くの場合、ブラウザー ウィンドウの右下隅です。
• ::-webkit-resizer ― 一部の要素の下隅に表示されるドラッグ可能なサイズ変更ハンドル。

以下のCSSが組み込んであります：

<DIV style="width:100px; height:100px; overflow:scroll; border:1px solid red;
">あああああああああああああああ
</DIV>

<DIV class=Test style="width:100px; height:100px; overflow:scroll; border:1px solid red;
">あああああああああああああああ
</DIV>

関連

テスト