HTML&CSS

  1. HOME
  2. HTML&CSS
  3. 【CSS】スクロールバーを非表示にする方法

【CSS】スクロールバーを非表示にする方法

HTML&CSS

【CSS】スクロールバーを非表示にする方法

「スクロールバーを非表示にしてください！」という修正依頼をお客様から頂くことがあります。
CSSのoverflowプロパティで、はみ出した要素をスクロールさせている箇所が該当します。

Macの場合、デフォルトではスクロールバーは表示されないのですが、システム環境設定でスクロールバーの表示を「常に表示」に設定していたり、Apple純正のマウスを使用していなかったり、Windowsで表示確認をしていたりする方にはスクロールバーが表示されてしまいます。

また表示確認しているブラウザが異なる場合「IE・Edge・Firefox・Chrome・Safari」で、非表示にする方法が異なってきます。

今回はCSSでスクロールバーを非表示にする方法をご紹介します。

スクロールバー非表示のサンプル

上記のサンプルを上下にスクロールしてみてください。
どのブラウザで確認してもスクロールバーが表示されていないことが確認できたと思います。

HTMLの記述について

<div class="content">
  <dl>
    <dt>プライバシーポリシー</dt>
    <dd>〇〇株式会社（以下「当社」といいます）は、以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、全従業員に個人情報保護の重要性の認識と取組みを徹底させることにより、個人情報の保護を推進致します。</dd>
  </dl>
  <dl>
    <dt>個人情報の管理</dt>
    <dd>当社は、お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行ないます。</dd>
  </dl>
  <dl>
    <dt>個人情報の利用目的</dt>
    <dd>お客さまからお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、電子メールや資料のご送付に利用いたします。</dd>
  </dl>
  <dl>
    <dt>個人情報の第三者への開示・提供の禁止</dt>
    <dd>当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。</dd>
  </dl>
  <dl>
    <dt>個人情報の安全対策</dt>
    <dd>当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。</dd>
  </dl>
  <dl>
    <dt>ご本人の照会</dt>
    <dd>お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。</dd>
  </dl>
</div>

「content」クラスの内側の要素をスクロールします。
overflowプロパティをよく利用されそうなプライバシーポリシーの文章にしてみました。

CSSの記述について

.content{
  /*要素の高さを指定*/
  height: 300px;
  /*上下方向にはみ出した要素ををスクロールさせる*/
  overflow-y: scroll;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
/*スクロールバー非表示（Chrome・Safari）*/
.content::-webkit-scrollbar{
  display:none;
}

上記コードは重要なプロパティだけ抜粋してます。
まず「height」と「overflow-y」プロパティではみ出した要素をスクロールさせます。
IE・Edge・Firefox・Chrome・Safariで、スクロールバーを非表示にする方法は異なります。

IE・Edgeでスクロールバーを非表示にする

.content{
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
}

IE・Edgeでは「-ms-overflow-style: none;」を指定することで、スクロールバーを非表示にすることができます。

Firefoxでスクロールバーを非表示にする

.content{
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}

Firefoxでは「scrollbar-width: none;」を指定することで、スクロールバーを非表示にすることができます。

Chrome・Safariでスクロールバーを非表示にする

/*スクロールバー非表示（Chrome・Safari）*/
.content::-webkit-scrollbar{
  display:none;
}

Chrome・Safariは疑似要素に「::-webkit-scrollbar」を付けて「display:none;」を指定することで、スクロールバーを非表示にすることができます。

まとめ

いかがだったでしょうか。
CSSに数行プロパティを加えるだけで、スクロールバーを非表示にすることができました。
このプロパティは意外と頻繁に使うので、コピペしてすぐ使えるように準備しておくとことをお勧めします。

ここまで読んで頂きましてありがとうございました。

あなたにおすすめの記事