htmlでブロックにスクロールバーを用意する方法

仕事の時のφ(..)メモメモ

概要

例えばこんなHTMLがあるとする。

<div class="test">
	<ul>
		<li>テスト１</li>
		<li>テスト２</li>
		<li>テスト３</li>
		<li>テスト４</li>
	</ul>
</div>

.testの中は制限なく増えていくので、いずれはページのスクロールが長くなってしまう。これは面倒い。

そこで、ブロックを作ってそこでスクロールできるようにしてあげる。

.test {
	/* こいつが重要 */
	overflow:auto;
	height:250px;
	line-height:1.5;
	padding:10px 0;
}

overflow:auto;を要素に与えると、その部分でスクロールできるようになる！ 便利。

またスクロールには種類があるので色々調べてみたけど、autoがいいかな。

スクロールバーを表示しない

overflow:hidden;

常時表示

何故かChromeではでてこなかった。。。（もしかして俺だけ？）

overflow:scroll;

まとめ

特になし。以上！