スクロールする要素のスクロールバーをCSSだけで非表示にする方法

ノートパソコン HTML/CSS

望まないスクロールバーを消したい…!

「overflow: scroll;」等の指定をして、ある要素をスクロールできるようにすると姿をあらわすスクロールバー。

デザイン的に邪魔になりがちなので、綺麗に消したいというケースが多々あるかと思います。

今回は、そんなスクロールバーをCSSのみで簡単に消す方法の備忘録をお届けします。(Chrome、Safari、IE、Edge、Firefox対応)

スクロールバーを非表示にする最適解はこれ

先に文章で簡単に説明すると、

  • 【Chrome、Safariへの対応】「overflow: scroll;」を指定した要素に擬似要素として「::-webkit-scrollbar」を指定して、「display: none;」を付与。
  • 【IE、Edgeへの対応】「overflow: scroll;」を指定した要素に「-ms-overflow-style: none;」を付与。
  • 【Firefoxへの対応】「overflow: scroll;」を指定した要素に「scrollbar-width: none;」を付与。

となります。

以下、詳しく説明していきます。

CSSだけでスクロールバーを非表示にする方法

今回は例として、以下のようなシンプルなリストのスクロール化を想定します。

【共通HTML】

<ul class="menu">
  <li class="menu-list">サンプル1</li>
  <li class="menu-list">サンプル2</li>
  <li class="menu-list">サンプル3</li>
  <li class="menu-list">サンプル4</li>
</ul>

まずはul要素に「overflow-y: scroll;」を指定し、普通に縦スクロールさせてみます。

【CSS(スクロールバーあり)】

.menu {
  overflow-y: scroll;

  /* 以下見栄え用 */
  background: #474949;
  width: 100%;
  height: 150px;
}

.menu-list {
  /* 以下見栄え用 */
  color: #ffffff;
  list-style: none;
  padding: 30px 20px;
}

【デモ(スクロールバーあり)】

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

このままでは当然、要素をスクロールさせると右側にスクロールバーが表示されますよね。

ではここから、「::-webkit-scrollbar」、「-ms-overflow-style:」、「scrollbar-width:」を使用してスクロールバーを非表示にしていきます。

【CSS(スクロールバーなし)】

.menu {
  overflow-y: scroll;
  -ms-overflow-style: none;    /* IE、Edge用 */
  scrollbar-width: none;    /* Firefox用 */

  /* 以下見栄え用 */
  background: #474949;
  width: 100%;
  height: 150px;
}

.menu::-webkit-scrollbar {    /* Chrome、Safari用 */
  display:none;
}

.menu-list {
  /* 以下見栄え用 */
  color: #ffffff;
  list-style: none;
  padding: 30px 20px;
}

【デモ(スクロールバーなし)】

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

どうでしょうか。

これで縦にスクロールしてもスクロールバーが表示されなくなったと思います。

具体的に説明すると、まずは「.menu」に擬似要素「::-webkit-scrollbar」を指定して、displayプロパティでスクロールバーを非表示にさせています。

ただ「::-webkit-scrollbar」はWebkit独自の擬似要素なので、このままだとChrome、Safari等Webkit系のブラウザ以外では非表示にできません。

そこで、IEやEdgeユーザー向けに「-ms-overflow-style: none;」プロパティを「.menu」に付与することでスクロールバーを非表示に。

同様にFirefox向けに、「scrollbar-width: none;」も指定しておけば、ほとんどのユーザーをカバーできると思います。

※これらはもちろん横スクロール時でも同様に指定すればOKです。

「overflow: hidden;」でスクロールバーを非表示にする方法について

その他、CSSでスクロールバーを非表示にする方法として出回っているのが、「overflow: hidden;」を使用する方法ですね。

こちらの方法ではスクロールバーを非表示にすることはできますが、スクロール自体も無効になってしまうので、デザインの仕様上どうしても必要だというケース以外には使うことはないでしょう。

具体的にはこんな感じです。

【CSS(スクロール&スクロールバーなし)】

.menu {
  overflow-y: hidden;

  /* 以下見栄え用 */
  background: #474949;
  width: 100%;
  height: 150px;
}

.menu-list {
  /* 以下見栄え用 */
  color: #ffffff;
  list-style: none;
  padding: 30px 20px;
}

【デモ(スクロール&スクロールバーなし)】

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

はい、がっちり固まってスクロールができなくなり、スクロールバーも非表示になりました。

「overflow: hidden;」を使いつつスクロールを有効にする方法

番外編になりますが、実はこの「overflow: hidden;」を使って力技でスクロールを有効にする方法もあります。

コードは以下の通り。

【HTML】

<div class="wrap">
  <ul class="menu">
    <li class="menu-list">サンプル1</li>
    <li class="menu-list">サンプル2</li>
    <li class="menu-list">サンプル3</li>
    <li class="menu-list">サンプル4</li>
  </ul>
</div>

【CSS】

.wrap {
  overflow: hidden;
  width: 100%;
}

.menu {
  overflow-y: scroll;
  width: calc(100% + 30px);
  padding-right: 30px;
  box-sizing: border-box;
  /* 以下見栄え用 */
  background: #474949;
  height: 150px;
}

.menu-list {
  /* 以下見栄え用 */
  color: #ffffff;
  list-style: none;
  padding: 30px 20px;
}

【デモ(スクロール&スクロールバーなし)】

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

こちらの方法ではまず、スクロールさせる要素「.menu」の横幅を「width: calc(100% + 30px);」でスクロールバーの幅以上余分に大きくし、親要素「.wrap」に「overflow: hidden;」を設定してはみ出た部分を非表示にさせています。

これで「.menu」要素はスクロールが可能なまま、スクロールバーが現れたとしても、常に「.wrap」より外側に表示されることになるので、ユーザーには見えないようになります。

この際「.menu」には「padding-right」プロパティで、大きくした分の余白(30px)を取り、paddingを要素の幅に含めるプロパティ「box-sizing: border-box;」を設定しないと、子要素を横幅目一杯に広げている場合は一部隠れてしまうので注意が必要です。

まあ実際には非表示というより見えなくしているだけなので、個人的にはあまりおすすめできない方法ですね…。

好みの方法でスクロールバーをカスタマイズしましょう

とはいえ、スクロールバーを非表示にする目的は様々だと思うので、ケースに応じて最適な方法でコーディングできるといいですね。

僕も勉強中の身なので、間違いやもっといい方法等あればコメントでご指摘いただけると嬉しいです。

コメント

タイトルとURLをコピーしました