[CSS] 任意の表示領域にスクロールバーを表示する方法

[CSS] 任意の表示領域にスクロールバーを表示する方法

CSSを用いて任意の表示アリアにスクロールバーを表示する方法。
詳細は以下から。

任意の表示領域にスクロールバーを表示する方法

DIVタグにid『hoge』を指定し、そのDIVタグ内の内容をスクロールバーでスクロールできる様な表現をしたい場合、下記の様に記述します。

<style>
<!--
#hoge {
width: 100px;
height: 50px;
overflow: scroll;
}
-->
</style>

<div id="hoge">
moge<br />moge<br />moge<br />moge<br />moge<br />
</div>

上記コードは以下の様に表示されます。

横スクロールを消したい場合は下記の様な記述が行えます。

<style>
<!--
#hoge {
width: 100px;
height: 50px;
overflow-y: scroll;
overflow-x: hidden;
}
-->
</style>

<div id="hoge">
moge<br />moge<br />moge<br />moge<br />moge<br />
</div>

関連記事