CSS-Set scrollen

CSS ist ein wichtiger Bestandteil der Webentwicklung. Es steuert die Einstellung von Seitenstilen und der Scroll-Effekt ist ebenfalls ein wesentlicher Bestandteil der CSS-Kenntnisse. In diesem Artikel werden wir darüber sprechen, wie Sie das Scrollen in CSS festlegen, um die Anzeige der Webseite reichhaltiger und dynamischer zu gestalten.

1. Was ist Scrollen? Der Scrolleffekt bedeutet, dass in einem bestimmten Bereich der Seite, wenn der Inhalt den sichtbaren Bereich des Bereichs überschreitet, automatisch vertikale oder horizontale Bildlaufleisten generiert werden, um den Inhalt darüber hinaus anzuzeigen sichtbarer Inhalt.

Normalerweise erscheint die vertikale Bildlaufleiste auf der rechten Seite der Seite und die horizontale Bildlaufleiste unten auf der Seite. Darüber hinaus werden die Bildlaufleisten nicht immer angezeigt und nicht angezeigt, wenn der Inhalt den sichtbaren Bereich nicht überschreitet.

2. So stellen Sie das Scrollen ein

CSS bietet Einstellungseigenschaften für die Bildlaufleiste. Wir können den Stil und die Funktionsweise der Bildlaufleiste festlegen. Im Folgenden sind einige der gebräuchlichsten Eigenschaften für Bildlaufleisteneinstellungen in CSS aufgeführt.

overflow

1. Das Overflow-Attribut steuert das Verhalten eines Elements, wenn sein Inhalt den sichtbaren Bereich des übergeordneten Elements überschreitet. Seine Attributwerte sind:

(1) sichtbar: Der „Überlauf“-Teil wird außerhalb der Elementbox gerendert.

(2) versteckt: „Überlauf“-Inhalte ausblenden.

(3) Scrollen: „Überlauf“-Inhalt zeigt Bildlaufleisten an.

(4)auto: Ermittelt automatisch, ob Bildlaufleisten angezeigt werden müssen.

Beispielcode:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Im obigen Code wird die Höhe des DIV-Elements auf 100 Pixel und die Breite auf 200 Pixel festgelegt. Anschließend wird die Höhe des P-Elements auf 200 Pixel und die Breite auf 400 Pixel festgelegt . Da die Größe des P-Elements zu diesem Zeitpunkt den sichtbaren Bereich des DIV-Elements überschreitet, wird im Überlaufteil eine Bildlaufleiste angezeigt.

scrollbar-width

Dieses Attribut kann die Breite der Bildlaufleiste steuern. Sein Wert kann auf „thin“ (dünn): dünn, „auto“ (automatisch) (ändert sich entsprechend den Browsereinstellungen) oder „none“ (keine Bildlaufleiste wird angezeigt) eingestellt werden .

Beispielcode:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Im obigen Code ist die Breite der Bildlaufleiste auf „dünn“ eingestellt. Zu diesem Zeitpunkt wird die Bildlaufleiste in einem dünnen Stil angezeigt.

scrollbar-color

Dieses Attribut wird verwendet, um die Farbe des Schiebereglers und der Gleitschiene der Bildlaufleiste zu steuern. Die verfügbaren Werte sind automatische oder benutzerdefinierte Farbwerte. Der benutzerdefinierte Farbwert wird als zwei Farbwerte geschrieben, die durch ein Leerzeichen getrennt sind, um eine Einwegfarbe darzustellen, und durch ein Komma getrennt, um eine Zweiwegfarbe darzustellen.

Beispielcode:

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: blue transparent;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Stellen Sie im obigen Code die Farbe des Schiebereglers der Bildlaufleiste auf Blau und die Farbe der Gleitschiene auf Transparent ein.

Zusammenfassung

In diesem Artikel werden verschiedene Methoden zum Festlegen von Bildlaufleisten in CSS erläutert. Zusätzlich zu diesen häufig verwendeten Attributen gibt es viele andere Einstellungsmethoden, die auch ihre eigenen Eigenschaften und Anwendungsszenarien haben. Ich hoffe, dass es den Lesern dabei helfen kann, das relevante Wissen und die praktischen Methoden von Scrolleffekten zu verstehen, ihre CSS-Kenntnisse zu verbessern und neue Möglichkeiten zu entdecken und zu üben.

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