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

ボックスのスクロールバーを非表示にする方法ってある？

例えばボックスの高さが固定されていてテキストが収まらない場合、スクロールさせると思います。

スクロールバーを表示させる方法については以下の記事を参照下さい。

CSSでスクロールバーを表示させる方法

上記のようにスクロールはさせたいけどスクロールバーは非表示にしたいと言う場合もあるかも知れません。

と言うことで、今回はスクロールはさせるけどスクロールバーは非表示にする方法をご紹介します。

効率よくコーディングしたい人はこちら

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

まずは通常のスクロールバーを表示バージョンを見てみます（Macの場合はスクロールしないとスクロールバーは表示されません）

See the Pen
スクロールバー表示 by junpei (@junpei-sugiyama)
on CodePen.

縦と横、両方スクロール出来ます。

HTMLはこちらです。

<div class="box">
  <p>①テキスト〜</p>
  <p>②テキスト〜</p>
  〜以下繰り返し〜
</div>

テキストを.boxと言うclassで囲っているだけですね。

CSSはこちら（スクロールのポイントとなる所だけ書きます）

.box {
  height: 200px;
  overflow: scroll;
  white-space: nowrap;
}

heightで高さを固定＆overflow: scroll;で縦のスクロールを実現し、white-space: nowrap;で横スクロールを実現しています。

そしてこちらがスクロールバーを非表示にした場合です。

See the Pen
スクロールバー非表示 by junpei (@junpei-sugiyama)
on CodePen.

先ほどと異なる点は以下のCSSになります。

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

.box::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

以上になります。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック