スクロールを有効にしたままスクロールバーを非表示にする方法ってある?
例えばボックスの高さが固定されていてテキストが収まらない場合、スクロールさせると思います。
スクロールバーを表示させる方法については以下の記事を参照下さい。
あわせて読みたい
【CSS】スクロールバーの表示・非表示を設定する方法
続きを見る
上記のようにスクロールはさせたいけどスクロールバーは非表示にしたいと言う場合もあるかも知れません。
そこで今回は『スクロールを有効のまま、スクロールバーは非表示にする方法』をご紹介します。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
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 対応 */
}
以上になります。
この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!
あわせて読みたい
【CSS】スクロールバーの表示・非表示を設定する方法
続きを見る
あわせて読みたい
【CSS】スクロールバーのデザインをカスタマイズする方法
続きを見る