長いテキストなど全ては表示させたくない場合があると思います。
そういった時にスクロールバーを表示させると便利です。
今回はこのスクロールバーの表示方法について解説したいと思います。
効率よくコーディングしたい人はこちら
スクロールバーを表示
まずスクロールバーを表示させる条件として、ボックスの高さを指定する必要があります。
当然高さを指定しなければ全部表示されるので、スクロールバーも不要という事です。
なので今回のボックス高さは300pxとしました。
そしてスクロールバーを表示させるにはoverflowというプロパティを使います。
overflowにはいくつか値があるので、違いを説明していきます。
visible
overflow: visible; は高さを指定してもスクロールバーが表示されず、そのままはみ出ます。
これは初期値なので、overflowを書かなくてもこうなります。
枠線がない部分がはみ出た箇所です。
高さを指定しなかった時は全部表示されるので、中途半端にはみ出るこのvisibleは基本的に使わないと思います。
hidden
overflow: hidden; は指定した高さに収まりますがスクロールバーは表示されず、指定した高さより下は見れなくなってしまいます。
これもほとんど使う機会はないかと思います。
scroll
overflow: scroll; にするとスクロールバーを表示させることが出来ます。
ただしWindowsとMacでは見え方が違います。
Windowsの場合
Macの場合
Windowsの方はスクロールバーが常時表示されますが、Macの場合はスクロールしないと表示されません。
Macでスクロールした場合はこのようにスクロールバーが表示されますが、デザインがWindowsとは異なります。
そして先ほどのWindowsの例で見ると、スクロールの必要がない横のスクロールバーも表示されています。
このスクロールバーは縦と横、それぞれ別々に設定することも出来ます。
- overflow-x → 横方向
- overflow-y → 縦方向
- overflow → 縦横両方
つまり先ほどは overflow: scroll; にしたので、縦横両方表示されてしまったという事です（Macはスクロールしないと表示されないので、スクロール出来ない横方法は表示されません）
なので縦方向だけスクロールバーを表示させたい時は、overflow: scroll; ではなく overflow-y: scroll; とすればOKです。
overflow: scroll; にして overflow-x: hidden; でも同じです（少しややこしいですが、縦横両方表示させてから横方向を非表示にするので、hidden以外にもvisibleでもOKです）
なので縦方向のみスクロールバーを表示させた場合のWindowsは次のようになります。
Windowsの場合（overflow-y: scroll;）
auto
最後に overflow: auto; ですが、これはブラウザに依存して自動で決まるもので、基本的には overflow: scroll; と同じになります。
ただしWindowsの場合は今回の例で言えば縦方向だけ表示されるので、正確に言えば overflow-y: scroll; と同じになります。
横のスクロールバーを使うには？
Windowsでは overflow: scroll; や overflow-x: scroll; にすれば横のスクロールバーは表示されますが、デフォルトでは横幅いっぱいになると自動で改行される為スクロールは出来ません。
自動で改行させずに横スクロールさせたい時は white-space: nowrap; と書けばOKです（初期値はwhite-space: normal; となり、自動改行されます）
先ほどの写真と見比べてみると分かりますが、横のスクロールバーがアクティブになりました。
今回は以上です。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
