Erstellen Sie ein scrollbares Div in HTML
-
Verwenden Sie die CSS-Eigenschaft
overflow
, um ein Div in HTML vertikal scrollbar zu machen -
Verwenden Sie die CSS-Eigenschaft
overflow-y
, um ein Div in HTML horizontal scrollbar zu machen
![Erstellen Sie ein scrollbares Div in HTML](/img/HTML/feature-image---html-scrollable-div.webp)
Dieser Artikel stellt vor, wie man ein div in HTML scrollbar macht. Wir werden vertikale und horizontale Scrolls untersuchen und ihre Implementierung anhand von Beispielen sehen.
Verwenden Sie die CSS-Eigenschaft overflow
, um ein Div in HTML vertikal scrollbar zu machen
Die Verwendung der CSS-Eigenschaft overflow
ist wahrscheinlich der einfachste Weg, um ein div in HTML scrollbar zu machen. Die Eigenschaft overflow
ist praktisch, wenn Inhalte den Block eines div
überlaufen lassen.
Wir können die Eigenschaft verwenden, um den Inhalt zu beschneiden und die Bildlaufleisten hinzuzufügen. Wir können dies erreichen, indem wir die Eigenschaft overflow
auf auto
setzen.
Als Ergebnis wird der Inhalt des div
abgeschnitten und eine Bildlaufleiste hinzugefügt. Folglich können wir das div
vertikal scrollen.
Bitte beachten Sie, dass die Eigenschaft overflow
nicht für div
s funktioniert, deren Höhe nicht angegeben ist.
Sehen wir uns einen Beispielcode an, wenn der Inhalt die angegebene Höhen- und Breitenbegrenzung überschreitet.
Erstellen Sie beispielsweise ein div namens div1
mit etwas Dummy-Inhalt. Stellen Sie in CSS die Höhe
und die Breite
des div auf 200px
ein.
Stellen Sie sicher, dass der Dummy-Text innerhalb des div
so lang ist, dass er die Länge des div
überschreitet.
Beispielcode:
<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;
}
Ohne overflow: auto;
nimmt der Inhalt mehr Platz ein, als für sein div
zugewiesen ist. Das ist nicht das, was wir wollen, also verwenden wir die Eigenschaft overflow
, um den Inhalt zu verwalten.
Beispielcode:
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>
Mit overflow: auto;
wird der Dummy-Text in der angegebenen Breite und Höhe gekürzt und es erscheint ein Scrollbalken, mit dem wir das div vertikal scrollen können, um den gesamten Inhalt anzuzeigen. Wenn Sie möchten, dass jedes Mal ein Scrollbalken erscheint, auch wenn die Höhe und Breite ausreichend sind, können Sie overflow-y: scroll;
verwenden. stattdessen.
So können wir die CSS-Eigenschaft overflow
verwenden, um ein vertikal scrollbares div
in HTML zu erstellen.
Verwenden Sie die CSS-Eigenschaft overflow-y
, um ein Div in HTML horizontal scrollbar zu machen
Um ein div
horizontal scrollbar zu machen, müssen wir nur overflow-x: auto;
beibehalten. und overflow-y: hidden;
unter Verwendung einer zusätzlichen Eigenschaft white-space: nowrap;
. Wenden wir die folgende CSS-Eigenschaft in unserem zuvor geschriebenen HTML-Block an.
Stellen Sie beispielsweise die Höhe
einer Unterteilung div1
auf 100px
ein. Stellen Sie dann die Eigenschaften overflow
und white-space
wie zuvor erwähnt ein.
Die Eigenschaft overflow-x: auto
sorgt für ein Scrolling, wenn der Inhalt die Dimension von div
auf der x-Achse überschreitet.
Ebenso schneidet overflow-y
auf hidden
gesetzt den Inhalt ab, und auf der y-Achse wird keine Scrollmöglichkeit beibehalten. Wir haben den Wert nowrap
für die Eigenschaft white-space
verwendet, um Zeilenumbrüche zu verhindern.
Beispielcode:
.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