Machen Sie ein Div mithilfe von CSS vertikal scrollbar-CSS-Tutorial-php.cn

Machen Sie ein Div mithilfe von CSS vertikal scrollbar

PHPz

Freigeben： 2023-09-06 17:29:02

nach vorne

1333 Leute haben es durchsucht

使用 CSS 使 Div 可垂直滚动

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!