HTMLでのスクロールバーの表示と非表示の切替方法【現役エンジニアが解説】
今回は、HTMLでのスクロールバーの表示と非表示の切替方法について、縦と横のスクロールバーに分け、簡単に解説していきます。
スクロールバーの表示切替
スクロールバーはスタイルのoverflowプロパティで表示を切り替えられます。
overflowプロパティの値をvisibleにすると表示、hiddenにすると非表示となります。
<div style="height:200px;width:200px;overflow:visible;">
<!--スクロールバーが表示される-->
</div>
<div style="height:200px;width:200px;overflow:hidden;">
<!--スクロールバーが表示されない-->
</div>
上記のコードでは、スクロールバーを表示するdiv要素と表示しないdiv要素を表示しています。
横スクロールバーのみ切替
横スクロールバーはスタイルのoverflow-xプロパティで表示の切り替えが可能です。
overflow-xプロパティの値がvisibleであれば表示、hiddenであれば非表示となります。
<div style="height:200px;width:200px;overflow-x:visible;">
<!--横スクロールバーが表示される-->
</div>
<div style="height:200px;width:200px;overflow-x:hidden;">
<!--横スクロールバーが表示されない-->
</div>
上記のコードでは、横スクロールバーを表示するdiv要素と表示しないdiv要素を表示しています。
縦スクロールバーのみ切替
縦スクロールバーに関してもスタイルのoverflow-yプロパティで表示切替が行えます。
overflow-yプロパティの値がvisibleの場合には表示、hiddenの場合には非表示となります。
<div style="height:200px;width:200px;overflow-y:visible;">
<!--縦スクロールバーが表示される-->
</div>
<div style="height:200px;width:200px;overflow-y:hidden;">
<!--縦スクロールバーが表示されない-->
</div>
上記のコードでは、縦スクロールバーを表示するdiv要素と表示しないdiv要素をそれぞれ表示しています。