HTML でスクロール可能な Div を作成する
-
CSS
overflowプロパティを使用して、HTML で Div を垂直方向にスクロール可能にする -
CSS
overflow-yプロパティを使用して、HTML で Div を水平方向にスクロール可能にする
この記事では、HTML で div をスクロール可能にする方法を紹介します。 垂直スクロールと水平スクロールを調べ、例を通してそれらの実装を確認します。
CSS overflow プロパティを使用して、HTML で Div を垂直方向にスクロール可能にする
HTML で div をスクロール可能にする最も簡単な方法は、おそらく CSS の overflow プロパティを使用することです。 overflow プロパティは、コンテンツが div のブロックをオーバーフローする場合に役立ちます。
プロパティを使用してコンテンツをクリップし、スクロールバーを追加できます。 overflow プロパティを auto に設定することで実現できます。
その結果、div のコンテンツがクリップされ、スクロールバーが追加されます。 その結果、div を垂直方向にスクロールできるようになります。
overflow プロパティは、高さが指定されていない div では機能しないことに注意してください。
コンテンツが指定された高さと幅の制限を超えた場合のコード例を見てみましょう。
たとえば、ダミー コンテンツを含む div1 という名前の div を作成します。 CSS で、div の height と width を 200px に設定します。
div 内のダミー テキストは、div の長さを超える長さにしてください。
コード例:
<div class = "div1">
What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>
body{
background: white;
}
.div1{
height : 200px;
width: 200px;
}
overflow: auto; を使用しないと、コンテンツは div に割り当てられたスペースよりも多くのスペースを必要とします。 これは私たちが望んでいるものではないので、overflow プロパティを使用してコンテンツを管理しましょう。
コード例:
body{
background: white;
}
.div1{
max-height : 200px;
width: 200px;
overflow: auto;
}
<div class = "div1">
What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>
overflow: auto; を使用すると、ダミー テキストが指定された幅と高さにクリップされ、スクロール バーが表示されるので、div を垂直方向にスクロールしてすべてのコンテンツを表示できます。 高さと幅が十分であっても、毎回スクロールバーを表示したい場合は、 overflow-y: scroll; を使用できます。 その代わり。
したがって、CSS の overflow プロパティを使用して、HTML で垂直方向にスクロール可能な div を作成できます。
CSS overflow-y プロパティを使用して、HTML で Div を水平方向にスクロール可能にする
div を水平方向にスクロール可能にするには、overflow-x: auto; を維持するだけです。 および overflow-y: hidden; 追加のプロパティ white-space: nowrap; を使用します。 以前に作成した HTML ブロックに次の CSS プロパティを適用してみましょう。
たとえば、分割 div1 の height を 100px に設定します。 次に、前述のように overflow および white-space プロパティを設定します。
overflow-x: auto プロパティは、コンテンツが x 軸上の div のサイズを超えた場合にスクロールを提供します。
同様に、overflow-y を hidden に設定すると、コンテンツがクリップされ、y 軸のスクロール機能は維持されません。 改行を防ぐために、white-space プロパティに nowrap 値を使用しました。
コード例:
.div1{
height : 100px;
width: 300px;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
}
<div class = "div1">
What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn