CSSでのscrollbarの使い方！非表示や位置変更の方法を解説

scrollbarを作成したい
scrollbarを非表示にするには？
位置変更の仕方を知りたい

scrollbarはウィンドウでスクロールをするための仕様です。

縦や横方向へのスクロールを行うことで、視認性を上げられます。

scrollbarを作成できるようになる
scrollbarを非表示にできる
scrollbarの基本情報が分かる

scrollbarとは

スクロールバー（scrollbar）は、コンピュータのインターフェースにおいて、ウィンドウやパネル内のコンテンツを縦や横にスクロールするためのコントロールです。

ユーザーはスクロールバーを使って、画面に収まりきらないコンテンツを表示させられます。

スクロールバーは主に縦方向に配置されることが多いですが、必要に応じて横方向にも配置されます。

ウェブページやアプリケーションのデザインにおいて、スクロールバーの視認性や利用のしやすさはユーザーエクスペリエンスに大きく影響します。

スクロールを可能にするプロパティ

スクロールを可能にするCSSプロパティには主にoverflowがあります。

このプロパティには以下の値が設定できます。

それぞれ解説していきますので、参考にしてください。

overflow:visible

overflow: visible は、要素の内容がそのボックスを超えても、はみ出した内容が表示されることを意味します。

これはデフォルトの設定で、スクロールバーは表示されません。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

この設定では、コンテンツが隣接する要素に重なる可能性がありますが、重要な情報が隠れることはありません。

overflow:hidden

overflow: hidden は、要素の内容がボックスを超える場合、超えた部分が切り取られて表示されないことを意味します。

この設定ではスクロールバーは表示されませんが、はみ出したコンテンツは完全に隠れます。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

overflow:scroll

overflow: scroll は、コンテンツがボックスを超える場合にスクロールバーが表示されることを意味します。

この設定では、コンテンツ量に関わらず、常にスクロールバーが表示されます。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

overflow:auto

overflow: auto は、コンテンツがボックスを超える場合にのみスクロールバーが表示されることを意味します。

コンテンツがボックスに収まる場合はスクロールバーは表示されません。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

cssでscrollbarを表示する方法

CSSを使用してスクロールバーを表示する主な方法は、overflow プロパティの設定です。

このプロパティは、要素の内容がそのコンテナのサイズを超えたときの表示方法を制御します。

overflow プロパティにはいくつかの値がありますが、スクロールバーを表示するためには主に scroll と auto を使用します。

overflow: scroll	この値を設定すると、要素に常にスクロールバーが表示されます。 コンテンツがコンテナ内に収まっていても、スクロールバーは表示され続けます。
overflow: auto	この値を設定すると、コンテンツがコンテナを超える場合にのみスクロールバーが表示されます。 コンテンツがコンテナ内に収まる場合はスクロールバーは表示されません。

overflow: scroll の使用例

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

overflow: auto の使用例

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

cssでscrollbarを非表示にする方法

スクロールバーを非表示にする方法は、ブラウザごとに異なる場合があります。

主要なブラウザでの非表示方法は以下の通りです。

Google Chromeでscrollbarを非表示にする

Google Chromeでは、::-webkit-scrollbar 擬似要素を使ってスクロールバーを非表示にすることができます。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

Microsoft Edgeでscrollbarを非表示にする

Microsoft EdgeもChromeと同様に、::-webkit-scrollbar 擬似要素を使ってスクロールバーを非表示にします。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

Safariでscrollbarを非表示にする

Safariでも、::-webkit-scrollbar 擬似要素を使ってスクロールバーを非表示にできます。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

Firefoxでscrollbarを非表示にする

Firefoxでは、scrollbar-width プロパティを使用してスクロールバーを非表示にすることができます。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

【サンプルコード有】cssでscrollbarのデザインを変更する方法

スクロールバーのデザインを変更するには、CSSの擬似要素を使用します。

具体的には、以下のようなデザイン変更が可能です。

スクロールバーのボタンや背景をカスタマイズする

スクロールバーのボタンや背景をカスタマイズするには、::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-trackなどの擬似要素を使用します。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

スクロールバーの幅を調整する

スクロールバーの幅を調整するには、::-webkit-scrollbar 擬似要素に幅を指定します。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

スクロールバーのボタンや背景の角丸を調整する

スクロールバーの角丸を調整するには、::-webkit-scrollbar-thumb 擬似要素に border-radius プロパティを使用します。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

まとめ

スクロールバーはウェブページやアプリケーションにおいて非常に重要な機能です。

CSSを使用することで、スクロールバーの表示・非表示やスタイルをカスタマイズすることが可能です。

これにより、より良いユーザーエクスペリエンスを提供し、ウェブページやアプリのデザインを改善できます。