スクロールするけどスクロールバーを表示させない件

デザインやページの仕様によって、スクロールはさせたいけどスクロールバーは表示させたくない！なんて事が時々発生します。

そんな時、javascriptなどを使わず、簡単なCSSだけで実現する方法です。
CSSで、wrapとinnerを使い分けるだけですので簡単に実装可能。

CSS部分は以下の様な感じです。

#wrap {
width:300px;
height:300px;
overflow:hidden;
border:solid 1px #ddd;
}

#inner {
width:300px;
height:300px;
padding-right:30px;
overflow:scroll;
overflow-x:hidden;
}

HTML部分はこんな感じ！

<div id="wrap">
<div id="inner">
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
<p>スクロール</p>
</div>
</div>

#inner のところで、
overflow:scroll;とoverflow-x:hidden;の2つの定義をしているのが味噌です。ｗ

まあ、もう少し綺麗な書き方あるのでしょうが、取りあえずはこのままで…。

ちなみに、overflow-x:hidden;の方を定義しないと、横のスクロールバーが表示されてしまいますので…。

あっ、あと高さや幅は自信の環境に合わせてCSSを調整してください。

スラスラわかるHTML&CSSのきほん 著：狩野 祐東 参考価格：¥1,995 価格：¥1,995