HTMLでのスクロールバーの表示と非表示の切替方法【現役エンジニアが解説】

PROGRAM

今回は、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要素をそれぞれ表示しています。