HTML-Bildlaufleiste festlegen

HTML Bildlaufleiste festlegen

Wenn auf einer Webseite zu viel Textinhalt vorhanden ist, kann dies dazu führen, dass die Seite unklar oder das Layout verwirrend ist. Zu diesem Zeitpunkt müssen wir Bildlaufleisten verwenden, damit Benutzer den gesamten Inhalt der Seite anzeigen können. In HTML können wir die Bildlaufleistenfunktion implementieren, indem wir Attribute festlegen.

Unter diesen sind die beiden am häufigsten verwendeten Attribute Überlauf und Überlauf-x / Überlauf-y.

1. Überlaufattribut

Dieses Attribut bestimmt, ob Bildlaufleisten angezeigt werden, wenn der Inhalt den Container überschreitet. Es gibt drei Werte, die verwendet werden können:

• visible: Der Standardwert, was bedeutet, dass die Bildlaufleiste nicht angezeigt wird, aber der Inhalt teilweise überläuft Container.
• hidden: Zeigt an, dass überlaufender Inhalt nicht angezeigt wird und keine Bildlaufleisten angezeigt werden.
• auto: Gibt an, dass die Bildlaufleiste nur angezeigt wird, wenn der Inhalt den Container überläuft, andernfalls wird sie nicht angezeigt.

Zum Beispiel:

<div style="width: 200px; height: 100px; overflow: auto;">
  这里是一段很长的内容...
</div>

In diesem Code beträgt die Breite des div-Elements 200 Pixel und die Höhe 100 Pixel. Wenn der Inhalt diesen Bereich überschreitet, werden automatisch Bildlaufleisten angezeigt.

2. Overflow-X- und Overflow-Y-Attribute

Zusätzlich zum Festlegen der gesamten Bildlaufleiste können wir auch die horizontale und vertikale Richtung festlegen bzw. Die Bildlaufleiste hat die spezifischen Eigenschaften overflow-x und overflow-y.

Der folgende Beispielcode wird angezeigt:

<div style="width: 150px; height: 150px; overflow-x: scroll; overflow-y: hidden;">
 这里是一些很宽的内容...
</div>

In diesem Code werden zwei Attribute verwendet. Wenn der Inhalt zu breit ist, werden nur horizontale Bildlaufleisten angezeigt; keine vertikalen Bildlaufleisten. Dadurch wird sichergestellt, dass die Seite mehr Platz für die Anzeige anderer Inhalte bietet.

Darüber hinaus gibt es ein häufig verwendetes Attribut – Überlaufstil. Es kann verwendet werden, um den Stil der Bildlaufleiste festzulegen, z. B. Randbreite, Farbe, Stil usw. Verwenden Sie beispielsweise den folgenden Code, um die Farbe der Bildlaufleiste in Blau zu ändern und die Breite auf 10 Pixel festzulegen:

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f2f2f2;
}
::-webkit-scrollbar-thumb {
  background-color: #2196F3;
}

Zusammenfassend lässt sich sagen, dass das Einrichten von Bildlaufleisten mithilfe von HTML sehr einfach ist. Durch Festlegen der Eigenschaften overflow und overflow-x / overflow-y können wir das Layout und die Inhaltsanzeige von Webseiten einfach implementieren. Schließlich können Sie Bildlaufleisten durch die Verwendung des Overflow-Stils besser an Ihren Branding- und Codierungsstil anpassen.

Das obige ist der detaillierte Inhalt vonHTML-Bildlaufleiste festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!