CSS 縦または横のみにスクロールバーを表示する方法
要素が入り切らずにはみ出してしまうときにスクロールバーを表示する方法をCSS 要素が入り切らない場合にスクロールバーを表示する方法で紹介しました。
overflowのスタイルは縦と横の両方のスクロールバーを制御しますが、縦または横のどちらかのみにスクロールバーを表示したい場合があります。
そのような場合は、overflow-xまたはoverflow-yのスタイルを指定します。
overflow-xは横、overflow-yは縦のスクロールバーを制御します。
設定方法はoverflowと同じです。詳しい使い方はCSS 要素が入り切らない場合にスクロールバーを表示する方法で紹介しています。
- visible
- そのまま表示（初期値）
- scroll
- 常にスクロールバーを表示
- auto
- はみ出すときだけスクロールバーを表示
- hidden
- 非表示
デモ
以下はoverflow-xにhidden、overflow-yにscrollを設定した場合の動作になります。
横スクロールは表示されずに、縦スクロールだけが表示されることが確認できます。
<div style="width: 300px; height: 100px; background-color: yellow; overflow-x: hidden; overflow-y: scroll;">
入り切らない長い文章あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>