Heim >Web-Frontend >CSS-Tutorial >Machen Sie ein Div mithilfe von CSS vertikal scrollbar
Machen Sie ein Div mithilfe von CSS vertikal scrollbar
- PHPznach vorne
- 2023-09-06 17:29:021359Durchsuche
Der Inhalt, den wir auf unserer Website verwenden möchten, kann groß sein und viel Platz beanspruchen, was bedeutet, dass andere Elemente der Website möglicherweise verschoben werden, was sich auf die Reaktionsfähigkeit der Website auswirkt. Um dies zu verhindern, müssen Sie dem Benutzer scrollbare Inhalte bereitstellen, sodass er bei Interesse nach unten scrollen kann, um den gesamten Inhalt zu lesen.
In diesem Artikel erfahren Sie, wie Sie einen Div-Bildlauf vertikal erstellen und welche Eigenschaften wir verwenden, um dies zu erreichen.
Wie erstelle ich einen vertikalen Bildlauf mit einem Div?
Das Überlaufattribut kann verwendet werden, um einen DIV vertikal scrollen zu lassen, da mehrere Werte in das Überlaufattribut eingegeben werden können. Es gibt einige Werte wie versteckt und automatisch. Basierend auf den verwendeten Werten können wir horizontale und vertikale Bildlaufleisten erstellen. Wenn wir den Auto-Wert verwenden, können wir eine vertikale Bildlaufleiste erhalten. Werfen wir einen Blick auf die Syntax des Überlaufattributs:
Grammatik
overflow:hidden/visible/clip/scroll/auto/inherit;
Wir verwenden die x-Achse und die y-Achse und setzen die Eigenschaften der x-Achse auf ausgeblendet und die Eigenschaften der y-Achse auf automatisch. Dadurch wird die horizontale Bildlaufleiste ausgeblendet und nur die vertikale Bildlaufleiste angezeigt, und wir erhalten automatisch die erforderlichen Informationen div.
Beispiel
In diesem Beispiel deklarieren wir ein Div und schreiben dann einen Absatz, in dem wir das Überlaufattribut hinzufügen, damit das Div vertikal scrollt.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of vertically scrollable div</title>
<style>
h2 {
color: Green;
}
.scrl {
padding: 3px;
color: white;
margin: 2px, 2px;
background-color: black;
height: 118px;
overflow-x: hidden;
color: white;
overflow-y: auto;
text-align: justify;
width: 489px;
}
</style>
</head>
<body>
<center>
<h2>Hi! This an example of the vertically scrollable div</h2>
<div class="scrl">This is an example of the vertically scrollable
div many beginner coders need the help of some articles or some sort of tutorials
to write there code. There are many instances in which the coder might need help
or can be stuck on a particular question. The community of coders is very huge
and is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
Im obigen Code haben wir das Überlaufattribut verwendet und seine X-Achse in „Ausgeblendet“ und seine Y-Achse in „Sichtbar“ geändert, wodurch wir in dem Absatz, den wir hier schreiben, eine vertikale scrollbare Leiste erhalten. Schauen wir uns die Ausgabe an, die wir durch die Ausführung des Codes erhalten.
Sie können sich die Ausgabe oben ansehen und sehen, dass wir eine vertikal scrollbare Leiste haben, mit der Sie nach unten scrollen können.
Hinweis – Wenn wir das Überlaufattribut verwenden, müssen wir das Element „Blockelement“ angeben, sonst funktioniert es möglicherweise nicht. Da diese Eigenschaft hauptsächlich zum Ausschneiden von Inhalten oder zum Hinzufügen scrollbarer Balken (entweder vertikal oder horizontal) verwendet wird, weil der verwendete Inhalt zu groß ist, um in den angegebenen Bereich zu passen.
Sehen wir uns ein weiteres Beispiel an, um diese Eigenschaft besser zu verstehen.
Beispiel
Anstatt die X- und Y-Achse der Eigenschaft zu ändern, setzen wir in diesem Beispiel den Wert der Eigenschaft auf „Auto“, damit das Div vertikal scrollt. Hier ist der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Another Example of vertically scrollable div</title>
<style>
.scrlr {
margin: 4px;
padding: 4px;
color: white;
background-color: black;
width: 488px;
height: 118px;
margin: 4px;
text-align: justify;
overflow: auto;
width: 488px;
text-align: justify;
}
h2 {
color: Red;
}
</style>
</head>
<body>
<center>
<h2>Hi! This another example of the verticallly scrollable div</h2>
<div class="scrlr">This is an example of the vertically scrollable div
many beginner coders need the help of some articles or some sort of tutorials to
write there code. There are many instances in which the coder might need help or
can be stuck on a particular question. The community of coders is very huge and
is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
Im obigen Code haben wir den Wert des Überlaufattributs von „versteckte X-Achse“ und „Automatische Y-Achse“ in „Auto“ geändert und das gleiche Beispiel verwendet, um unsere Ausgabeergebnisse anzuzeigen. Werfen wir einen Blick auf die Ausgabe, die dieser Code generiert.
Sie können sich die obige Ausgabe ansehen und sehen, dass wir selbst mit dem Auto-Wert in der Überlaufeigenschaft immer noch Bildlaufleisten haben.
Fazit
Die Überlaufeigenschaft wird häufig zum Ausschneiden von Inhalten verwendet, wenn diese viel Platz beanspruchen. Oder wenn wir eine Bildlaufleiste hinzufügen möchten, mit der der Benutzer nach unten scrollen kann, und so den gesamten Platzbedarf auf der Webseite reduzieren möchten.
In diesem Artikel haben wir gelernt, wie man das Overflow-Attribut verwendet und wie man einem Div eine vertikale Bildlaufleiste hinzufügt und mehr über die im Overflow-Attribut verwendeten Werte.
Das obige ist der detaillierte Inhalt vonMachen Sie ein Div mithilfe von CSS vertikal scrollbar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!