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