スクロールを有効にしたままスクロールバーを非表示にする方法ってある？
例えばボックスの高さが固定されていてテキストが収まらない場合、スクロールさせると思います。
スクロールバーを表示させる方法については以下の記事を参照下さい。
あわせて読みたい
-
【CSS】スクロールバーの表示・非表示を設定する方法
続きを見る
上記のようにスクロールはさせたいけどスクロールバーは非表示にしたいと言う場合もあるかも知れません。
そこで今回は『スクロールを有効のまま、スクロールバーは非表示にする方法』をご紹介します。
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】スクロールバーのデザインをカスタマイズする方法
続きを見る
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
今だけ！5大無料特典あり🎁
