Web制作 CSS

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

スクロールを有効にしたままスクロールバーを非表示にする方法ってある?

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

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

参考記事
【CSS】スクロールバーの表示・非表示を設定する方法
【CSS】スクロールバーの表示・非表示を設定する方法

続きを見る

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

そこで今回は『スクロールを有効のまま、スクロールバーは非表示にする方法』をご紹介します。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


CSSでスクロール有効のままスクロールバーを非表示にする方法

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

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

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

HTMLはこちらです。

<div class="sample">
  <div class="sample-box">
    テキストが入ります。
  </div>
  <div class="sample-box">
    テキストが入ります。
  </div>
  <!-- 以降繰り返し -->
</div>

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

CSSはこちら(重要なコードだけ書きます)

.sample {
  height: 300px; /* 高さを固定 */
  overflow: scroll; /* 縦横のスクロールを有効 */
  white-space: nowrap; /* テキストの折返しを無効 */
}
.sample-box {
  width: fit-content; /* テキストの折返しを無効にした時の背景色が途切れないようにする */
}

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

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

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

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

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

以上になります。

あわせて読む
【CSS】スクロールバーの表示・非表示を設定する方法
【CSS】スクロールバーの表示・非表示を設定する方法

続きを見る

あわせて読む
【CSS】スクロールバーのデザインをカスタマイズする方法
【CSS】スクロールバーのデザインをカスタマイズする方法

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS