CSS - scrollbar-width

• トップ
• CSSリファレンス
• scrollbar-width

概要

説明

スクロールバーの幅を指定します。IE を除く大半のブラウザでサポートされています。

auto

ブラウザのデフォルトにまかせます。

thin

細目の幅にします。

none

表示しません。

使用例

.my-box {
  width: 10rem;
  height: 5rem;
  border: 1px solid #999;
  overflow: scroll;
  scrollbar-width: #99f #fcc;
}
.scrollbar-width-auto { scrollbar-width: auto; }
.scrollbar-width-thin { scrollbar-width: thin; }
.scrollbar-width-none { scrollbar-width: none; }

<pre class="my-box scrollbar-width-auto">...</pre>
<pre class="my-box scrollbar-width-thin">...</pre>
<pre class="my-box scrollbar-width-none">...</pre>

AAA
BBB
CCC
DDD
EEE
FFF
GGG

AAA
BBB
CCC
DDD
EEE
FFF
GGG

AAA
BBB
CCC
DDD
EEE
FFF
GGG

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/scrollbar-width
• https://drafts.csswg.org/css-scrollbars/#scrollbar-width
• https://caniuse.com/mdn-css_properties_scrollbar-width