Erstellen Sie ein scrollbares Div in HTML

1. Verwenden Sie die CSS-Eigenschaft overflow, um ein Div in HTML vertikal scrollbar zu machen
2. Verwenden Sie die CSS-Eigenschaft overflow-y, um ein Div in HTML horizontal scrollbar zu machen

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>