CSSでスクロールバーを非表示にする方法をご紹介！【IE/Chrome/Firefox】

CSSでスクロールバーを非表示にしたい

縦や横に長いWebページを表示したとき、画面右か下にスクロールバーが表示されます。

ですが、Webページを作るにあたってこのスクロールバーを非表示にしたいという場合があるでしょう。

スクロールバーの表示・非表示を切り替えるにはCSSを使うことで制御できます。

今回はCSSを使ってスクロールバーを消す方法を見ていきましょう。

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

Webページのコンテンツがウィンドウ内に収まらない場合は以下のようにスクロールバーが表示されます。

<style>
  .box{
    font-size:20px;
    width:150px;
    height:150px;
    border:1px solid #000;
    /*スクロールの有効化*/
    overflow:scroll;
  }
  
</style>
<body>
  <div class="box">
    <pre>テキストコンテンツ
テキストコンテンツ
テキストコンテンツ
テキストコンテンツ
テキストコンテンツ
テキストコンテンツ
テキストコンテンツ
テキストコンテンツ</pre>
</div>
</body>

結果

このHTMLとCSSコードをベースにやり方を解説していきますので、上記コードをコピーして使うなりして試すようにしてください。

では、スクロールバーはCSSを記述することによって制御することができると冒頭でも話しましたが、ブラウザごとに書き方が少し異なります。

ですので、ブラウザごとの書き方を順番に見ていきましょう。

Google Chrome

最新版の Google Chrome では書き方が簡単です。

スクロールバーを非表示にしたい要素に対して以下のようにしています。

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

結果

こうすることでスクロールバーを無効化して、表示範囲に収まらないコンテンツがはみ出すようになります。セレクタ名が少し変わっている点に注意してください。

また、スクロールバーを非表示にしただけですので、マウスホイールやスワイプをすればしっかりスクロールされます。

IE(Internet Explorer)・Edge

IE・Edgeは独自の書き方が多い関係で、書き方が異なります。

これら２つのブラウザに対応したい場合は、「ms-overflow-styleプロパティ」を使用してください。

  .box{
        -ms-overflow-style: none;
    }

結果

このプロパティを使用することでIE・Edgeにてスクロールバーが表示されなくなります。

Chromium版Edgeは異なる

2020年に正式リリースされる予定のChromium版Edgeはレンダリングエンジンが変わる関係で書き方が異なります。

書き方がGoogle Chromeと同じようになるので、CHromium版Edgeに対応したい場合は、Google Chromeと同じ書き方でスクロールバーを非表示にしましょう。

Safari

あらゆるデバイスに対応したい場合は、iPhone・Macの標準ブラウザ「Safari」用の記述も忘れないようにしましょう。

といっても書き方はGoogle Chromeと同じです。

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

結果

「～webkit-scrollbar」と書いたセレクタに「display:none」を与えればスクロールバーが非表示になるので覚えておいてください。

特に日本はiPhoneユーザーが多いので、スマホユーザー向けのコンテンツを提供していてスクロールバーの非表示が必要な場合は必ず記述するようにしましょう。

Firefox

Firefoxに対応する場合はscrollbar-widthプロパティを使用します。

.box{
    scrollbar-width: none;
}

結果

Firefox固有の書き方ということもあり、忘れやすいので覚えておきましょう。

スクロールバーの表示とスクロールの両方を無効化したい場合

この場合はoverflowプロパティを使用しましょう。

.box{
    overflow:none;
}

結果

overflowプロパティにnone属性を指定することでスクロールそのものは無効化することができるので、スクロールされては困る場合はこのプロパティを使用しましょう。

このプロパティはどのブラウザも対応していますので、ブラウザごとに異なる書き方をする必要はありません。

【結論】CSSでスクロールバーを非表示にする書き方

ブラウザごとにスクロールバーを非表示にする CSS の書き方が異なりますが、全ブラウザに対応する書き方をするとなると以下のようになります。

.box{
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
}
.box::-webkit-scrollbar{
  display:none;/* Chrome, Safari 対応 */
}

結果

こうすることであらゆるデバイス・ブラウザに対応できるようになるので、困ったらこのコードをコピーして適宜セレクタ名を変更するようにしましょう。

セレクタ名を間違えると新しくスクロールバーが表示されないので注意してくださいね。