CSSでスクロールバーを非表示にする方法【ブラウザ別・全対応】

はじめに

Webサイトのデザインを整えているとき、スクロールバーが邪魔に感じたことはありませんか？スライダーやモーダルウィンドウなど、特定のコンテナではスクロールバーを隠してスッキリ見せたい場面があります。

しかし、ブラウザによって記述方法が異なるため、どのコードを書けばよいか迷ってしまう方も多いです。また「overflow: hiddenと何が違うの？」という疑問を持つ方もいるでしょう。

この記事では、全ブラウザに対応したスクロールバーの非表示コードを実装例付きで解説します。さらに「スクロール機能は残したまま見た目だけ消す方法」や「スクロールバーのデザインをカスタマイズする方法」も紹介するので、ぜひ参考にしてください。

CSSでスクロールバーを非表示にする基本コード

全ブラウザ対応のスクロールバー非表示CSS

スクロールバーを非表示にするには、Chrome・Edge・Safari向けの -webkit-scrollbar 擬似要素とFirefox向けの scrollbar-width プロパティを組み合わせるのが基本です。以下のコードを対象要素に適用することで、主要ブラウザすべてに対応できます。

/* Chrome・Edge・Safari */
.container::-webkit-scrollbar {
  display: none;
}

/* Firefox */
.container {
  scrollbar-width: none;
}

/* IE・旧Edge */
.container {
  -ms-overflow-style: none;
}

スクロール自体は機能させたまま見た目だけを消したい場合は、overflow プロパティと組み合わせて使います。

.container {
  overflow-y: scroll;       /* スクロール機能を有効にする */
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE・旧Edge */
}

.container::-webkit-scrollbar {
  display: none;            /* Chrome・Edge・Safari */
}

Chrome・EdgeはWebkit擬似要素を使う

ChromeとEdge（Chromiumベース）では、::-webkit-scrollbar 系の擬似要素でスクロールバーのスタイルを制御します。display: none を指定するだけでスクロールバーが非表示になります。

.container::-webkit-scrollbar {
  display: none;
}

または幅を0に設定する方法でも同様の効果が得られます。

.container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

-webkit- プレフィックスは、WebkitエンジンをベースにするChromeとEdgeでのみ有効です。SafariもWebkitエンジンを採用しているため、このコードはSafariにも適用されます。

FirefoxはscrollbarWidthプロパティを使う

Firefoxでは -webkit- 系の擬似要素が使えません。代わりに scrollbar-width プロパティを使います。none を指定するとスクロールバーが非表示になります。

.container {
  scrollbar-width: none;
}

scrollbar-width プロパティはCSS Scrollbars仕様に準拠しており、none（非表示）のほかに thin（細いスクロールバー）や auto（デフォルト）も指定できます。ChromiumベースのブラウザもFirefox 64以降から順次対応が進んでいるため、将来的にはこのプロパティ単体での対応も広まる見込みです。

overflow: hiddenとスクロールバー非表示の違い

overflow: hiddenとは何か

overflow: hidden はコンテナからはみ出したコンテンツを切り取って非表示にするプロパティです。スクロールバーも表示されなくなりますが、はみ出した部分のコンテンツ自体も見えなくなります。

.container {
  overflow: hidden;
}

overflow: hidden を指定したコンテナでは、ユーザーがマウスホイールやタッチ操作でスクロールしようとしても動きません。スクロール機能が必要なコンテナには使えないことを覚えておきましょう。

スクロール機能を保ちながらバーだけ消す方法

スクロールバーを視覚的に隠しつつ、スクロール操作自体は維持したい場合は、overflow: scroll または overflow: auto と組み合わせる必要があります。

.container {
  overflow-y: scroll;       /* スクロール機能は残す */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.container::-webkit-scrollbar {
  display: none;
}

こうすることで、ユーザーはマウスホイールや二本指スワイプでスクロールできますが、スクロールバーは画面に表示されません。

overflow: hiddenとの使い分け基準

overflow: hidden はレイアウト崩れの修正や子要素のfloat解除のために使われることが多く、スクロールバーの制御が主目的ではありません。スクロールバーの表示・非表示を意図的にコントロールするには、専用の scrollbar-width プロパティや -webkit-scrollbar 擬似要素を使いましょう。

スクロールバーのデザインをカスタマイズする方法

スクロールバーの色・幅を変更する

-webkit-scrollbar 系の擬似要素を使うと、スクロールバーの色や幅を自由にカスタマイズできます。主に使う擬似要素は以下の3つです。

.container::-webkit-scrollbar {
  width: 8px; /* スクロールバーの幅 */
}

.container::-webkit-scrollbar-track {
  background: #f1f1f1; /* レールの背景色 */
}

.container::-webkit-scrollbar-thumb {
  background: #888; /* バーの色 */
}

.container::-webkit-scrollbar-thumb:hover {
  background: #555; /* ホバー時の色 */
}

なお、これらの擬似要素はChrome・Edge・Safariでのみ有効です。Firefoxでスクロールバーの色を変更するには scrollbar-color プロパティを使います。

/* Firefox：バーの色とレールの色を指定 */
.container {
  scrollbar-color: #888 #f1f1f1;
}

スクロールバーを角丸にする

スクロールバーのサム（バー本体）を角丸にするには、::-webkit-scrollbar-thumb に border-radius を指定します。

.container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px; /* 角丸の半径 */
}

レール部分も合わせて角丸にしたい場合は ::-webkit-scrollbar-track にも追加します。

.container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

カスタムデザインの実装サンプルコード

以下は細くてシンプルなスクロールバーを実装する実用的なサンプルです。Chrome・Edge・SafariとFirefox両方に対応しています。

.scrollable {
  overflow-y: scroll;
  height: 200px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #aaa #f0f0f0;
}

/* Chrome・Edge・Safari */
.scrollable::-webkit-scrollbar {
  width: 6px;
}

.scrollable::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #777;
}

スクロールバー非表示の注意点

非表示にするとユーザビリティが下がるケース

スクロールバーを非表示にすると、ユーザーが「このエリアはスクロールできる」と気づかない可能性があります。特に以下のケースでは慎重に検討が必要です。

• コンテンツ量が多く、スクロールしないと全体が見えないセクション
• テキストの読み物コンテンツや長いリスト表示
• アクセシビリティへの配慮が必要なサービス

スクロールバーはスクロール可能であることをユーザーに伝える重要なUIの手がかりです。見た目のスッキリさを優先するあまり、操作方法がわかりにくくなる状況を作らないよう注意しましょう。

モバイルとPCでの挙動の違い

モバイル（iOS・Android）のブラウザは、スクロール中のみスクロールバーをオーバーレイ表示し、静止時は自動で非表示になる仕様が一般的です。そのため、スクロールバー非表示のCSSはPCブラウザで主に効果を発揮します。

iOSのSafariはデフォルトでスクロールバーを表示しない設計になっているため、多くの場合は追加のCSSなしで問題ありません。一方、Androidは機種やブラウザによって挙動が異なる場合があるため、実機での確認が推奨されます。

スクロール可能であることを示す代替UIのアイデア

スクロールバーを非表示にする場合は、スクロール可能であることをユーザーに伝える代替UIを検討しましょう。

• コンテナの下端にフェードアウト効果（グラデーション）を重ねる
• 「もっと見る」などのテキストや矢印アイコンを表示する
• ドットインジケーターやページネーションを設置する

これらを組み合わせることで、スクロールバーを隠しながらも直感的な操作性を維持できます。

CSSスクロールバー制御のよくある疑問Q&A

特定の要素だけスクロールバーを消したい場合は？

対象要素にクラスを付与し、そのセレクターに対してCSSを適用します。

.no-scrollbar {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

ページ全体に適用したい場合は body セレクターを使う方法もありますが、ページ全体のスクロールバーを消すとユーザビリティへの影響が大きいため、基本的には特定の要素のみへの適用を推奨します。

横スクロールのバーだけ消すにはどうすればいい？

::-webkit-scrollbar:horizontal 擬似クラスを使うと、横スクロールバーだけを対象にできます。

/* 横スクロールバーのみ非表示（Chrome・Edge・Safari） */
.container::-webkit-scrollbar:horizontal {
  display: none;
}

/* 縦スクロールバーのみ非表示 */
.container::-webkit-scrollbar:vertical {
  display: none;
}

Firefoxの scrollbar-width は縦横を個別に指定する方法がないため、横のみを消したい場合はFirefox対応に制限があります。

iOSのSafariでも対応できる？

iOSのSafariはWebkitベースのため、::-webkit-scrollbar 擬似要素が基本的に使えます。ただし、iOS Safariはデフォルトでスクロールバーを表示しない仕様のため、追加CSSなしで問題ないケースがほとんどです。

iOSでスムーズなスクロールを実現するには、overflow-y: scroll を指定するだけでネイティブスクロールが動作します。以前は -webkit-overflow-scrolling: touch が必要でしたが、iOS 13以降では不要となっています。

まとめ

CSSでスクロールバーを非表示にするには、Chrome・Edge・Safari向けに ::-webkit-scrollbar、Firefox向けに scrollbar-widthプロパティを組み合わせて使います。

デザインカスタマイズを行う場合も -webkit-scrollbar 系の擬似要素を活用することで、色・幅・角丸を自由に設定できます。スクロールバーを隠す際はユーザビリティへの影響も考慮し、必要に応じて代替UIの併用を検討しましょう。

CSSの実装スキルをさらに深めたい方には、WEBMASTERSのプログラミングスクールがおすすめです。現場で通用するフロントエンドスキルを、実践的なカリキュラムで身につけることができます。