例えばボックスの高さが固定されていてテキストが収まらない場合、スクロールさせると思います。
スクロールバーを表示させる方法については以下の記事を参照下さい。
【CSS】スクロールバーの表示・非表示を設定する方法
続きを見る
上記のようにスクロールはさせたいけどスクロールバーは非表示にしたいと言う場合もあるかも知れません。
そこで今回は『スクロールを有効のまま、スクロールバーは非表示にする方法』をご紹介します。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
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】スクロールバーのデザインをカスタマイズする方法
続きを見る