サイズを指定した要素内にスクロールバーを表示する

スクロールバーを表示する

要素の中に入っているコンテンツが親要素の中に収まらない場合は、次のようにスクロールバーを表示することができます。
iframe要素の表示と似ています。

コード例

<style>
section {
	overflow: scroll;
	margin: 50px auto 20px;
	padding: 25px;
	width: 300px;
	height: 200px;
	border: 2px solid #ccc;
}
h1 {
 	min-width: 400px;
}

p {
 	min-width: 400px;
}

figure {
 	width: 400px;
}
</style>
<section>
	<h1>サイズを指定した要素内にスクロールバーを表示する</h1>
	<p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
	<figure><img src="./images/pic_sample.jpg"></figure>
</section>

縦横ともにサイズオーバーしているときは、このように縦スクロールと横スクロールの両方を表示することもできます。
上記コードのoverflowプロパティで指定している「scroll」の値が、スクロール表示の指定に該当します。

スクロールバーの表示を制御する

先ほどのコードでoverflowプロパティを指定しなかった時の表示から確認します。
親要素のsection要素のサイズ指定は残して、子孫要素のサイズ指定のみすべて解除して表示してみます。

コード例

<style>
section {
/* 	スクロールの指定はコメントアウト */
/* 	overflow: scroll; */
	margin: 50px auto 20px;
	padding: 25px;
	width: 300px;
	height: 200px;
	border: 2px solid #ccc;
}

/* 子孫要素のサイズ指定をすべてコメントアウト */
h1 {
/* 	min-width: 400px; */
}

p {
/* 	min-width: 400px; */
}

figure {
	width: 100%;
/* 	width: 400px; */
}
</style>
<section>
	<h1>サイズを指定した要素内にスクロールバーを表示する</h1>
	<p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
	<figure><img src="./images/pic_sample.jpg"></figure>
</section>

高さが親要素の範囲に収まらず、はみ出して表示されます。
横は成り行きとなります。

そこで、まずは縦のスクロールバーのみ表示してみます。

コード例

<style>
section {
	overflow-y: scroll;
	margin: 50px auto 20px;
	padding: 25px;
	width: 300px;
	height: 200px;
	border: 2px solid #ccc;
}

/* 子孫要素のサイズ指定はすべてコメントアウト */
h1 {
/* 	min-width: 400px; */
}

p {
/* 	min-width: 400px; */
}

figure {
	width: 100%;
/* 	width: 400px; */
}
</style>
<section>
	<h1>サイズを指定した要素内にスクロールバーを表示する</h1>
	<p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
	<figure><img src="./images/pic_sample.jpg"></figure>
</section>

続いて、子孫要素のサイズ指定を戻します。

コード例

<style>
section {
	overflow: scroll;
	margin: 50px auto 20px;
	padding: 25px;
	width: 300px;
	height: 200px;
	border: 2px solid #ccc;
}

h1 {
 	min-width: 400px;
}

p {
 	min-width: 400px;
}

figure {
 	width: 400px;
}
</style>
<section>
	<h1>サイズを指定した要素内にスクロールバーを表示する</h1>
	<p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
	<figure><img src="./images/pic_sample.jpg"></figure>
</section>

overflow-yプロパティもoverflowプロパティへ変更しました。
値はそのまま「scroll」です。
表示は次のように縦横の両方にスクロールが表示されます。

スクロールバーを非表示にする

最後にスクロールバーを非表示に設定します。
スクロールバーを非表示にするには、値を「hidden」にします。

次の例では縦スクロールバーをそのまま表示にして、横スクロールバーのみ非表示にしています。

コード例

<style>
section {
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 50px auto 20px;
	padding: 25px;
	width: 300px;
	height: 200px;
	border: 2px solid #ccc;
}

h1 {
 	min-width: 400px;
}

p {
 	min-width: 400px;
}

figure {
 	width: 400px;
}
</style>
<section>
	<h1>サイズを指定した要素内にスクロールバーを表示する</h1>
	<p>要素の中で表示しきれないコンテンツは、スクロールバーを使って表示するように設定することができます。</p>
	<figure><img src="./images/pic_sample.jpg"></figure>
</section>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。