読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

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

html CSS

スポンサードリンク

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

概要


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

<div class="test">
	<ul>
		<li>テスト1</li>
		<li>テスト2</li>
		<li>テスト3</li>
		<li>テスト4</li>
	</ul>
</div>


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


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

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


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


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

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

overflow:hidden;

常時表示

何故かChromeではでてこなかった。。。(もしかして俺だけ?)

overflow:scroll;

まとめ


特になし。以上!