Wie stelle ich eine Bildlaufleiste in CSS ein? Detaillierte Beispiele zum Festlegen von CSS-Bildlaufleisten

Bei der Gestaltung von Webseiten ist die Gestaltung von Bildlaufleisten sehr wichtig, damit der Bildlaufleistenstil angezeigt wird, wenn der Text oder das Bild die Containergröße überschreitet. Wie stellt man die Bildlaufleiste in CSS ein? Als Nächstes erkläre ich Ihnen, wie Sie die CSS-Bildlaufleiste festlegen.

Werfen wir zunächst einen Blick auf die Eigenschaften, die möglicherweise erforderlich sind, um die Bildlaufleiste in CSS festzulegen.

1. Überlauf-y: Legen Sie fest, wie der Inhalt verwaltet werden soll, wenn der Inhalt des Objekts seine angegebene Höhe überschreitet Objekt überschreitet seine angegebene Breite

Parameter:

sichtbar: Erweitern Sie den Bereich, um den gesamten Inhalt anzuzeigen
Auto: Bildlaufleisten nur hinzufügen, wenn der Inhalt den Grenzwert überschreitet
versteckt: immer Blende die Bildlaufleiste aus
scrollen: Zeigt die Bildlaufleiste immer an

2. Höhe: Stellen Sie die Höhe der Bildlaufleiste ein (ändern Sie einfach den folgenden Wert).

3. Farbparametereinstellung für die Bildlaufleiste:

scrollbar-3d-light-color legt die helle Rahmenfarbe der Bildlaufleiste fest oder ruft sie ab.
scrollbar-highlight-color legt die 3D-Bildlaufleiste fest oder ruft sie ab Schnittstelle Die Farbe der hellen Kante (ThreedHighlight)
scrollbar-face-color Legt die Farbe der 3D-Oberfläche der Bildlaufleiste (ThreedFace) fest oder ruft sie ab.
scrollbar-arrow-color Legt die Farbe der Richtung der Bildlaufleiste fest oder ruft diese ab Pfeil
scrollbar-shadow -color Setzt oder ruft die Farbe des dunklen Randes (ThreedShadow) der 3D-Schnittstelle der Bildlaufleiste ab
scrollbar-dark-shadow-color Setzt oder ruft die Farbe des dunklen Randes der Bildlaufleiste (ThreedDarkShadow) ab
scrollbar-base-color Legen Sie die Grundfarbe der Bildlaufleiste fest oder rufen Sie sie ab.

Schauen wir uns als Nächstes CSS an, um den Stil der Bildlaufleiste festzulegen.

In der HTML-Seite können wir die Bildlaufleiste der gesamten Seite so definieren.

*{
scrollbar-3dlight-color:#D4D0C8; 
   scrollbar-highlight-color:#fff; 
   scrollbar-face-color:#E4E4E4; 
   scrollbar-arrow-color:#666; 
   scrollbar-shadow-color:#808080; 
   scrollbar-darkshadow-color:#D7DCE0; 
   scrollbar-base-color:#D7DCE0; 
   scrollbar-track-color:#;
}

Schließlich schauen wir uns an, wie man die Bildlaufleiste ausblendet, nachdem man sie in CSS festgelegt hat (horizontal, vertikal)

Viele Leute sagen, dass man sie verwenden soll overflow-y: Hiddencss kann die Bildlaufleiste ausblenden, aber es kann nur auf div-Elemente abzielen und den Browser nicht ausblenden, und einige Informationen besagen Fügen Sie scroll="no" zu hinzu, um die Bildlaufleiste auszublenden. Fügen Sie style="overflow-x:hidden" zu hinzu. um die vertikale Bildlaufleiste auszublenden.

1. Vollständig ausblenden: Scroll="no" hinzufügen, um die Bildlaufleiste auszublenden.

2. Ausblenden, wenn die Breite oder Höhe des Browserfensters größer als die Seite ist Wenn die Breite oder Höhe hoch ist, wird die Bildlaufleiste nicht angezeigt.

3. Stylesheet-Methode:

Add style="overflow-x:hidden " um die horizontale Bildlaufleiste auszublenden;

Style="overflow-y:hidden" hinzufügen, um die vertikale Bildlaufleiste auszublenden.

Endgültige Methode zum Ausblenden:

Fügen Sie

<style>html {
 overflow-x:hidden; //隐藏水平滚动条
 overflow-y:hidden;//隐藏垂直滚动条
 }
 </style>

zur Seite hinzu. Verwandte Empfehlungen:

CSS-fixierter Div-Kopf scrollt nicht mit die Bildlaufleiste

CSS-Ebenen-Bildlaufleiste_Erfahrungsaustausch

Das obige ist der detaillierte Inhalt vonWie stelle ich eine Bildlaufleiste in CSS ein? Detaillierte Beispiele zum Festlegen von CSS-Bildlaufleisten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!