So verschönern und passen Sie Bildlaufleisten mit CSS an

In der Webentwicklung sind Bildlaufleisten ein häufig verwendetes Steuerelement, das dazu beitragen kann, dass der Inhalt einer Seite auf begrenztem Raum besser angezeigt wird. Da Browser und Betriebssysteme über bestimmte Standardstile für Bildlaufleisten verfügen, ist es häufig erforderlich, Bildlaufleisten in CSS zu verschönern und anzupassen.

In CSS können Sie einige Pseudoelemente verwenden, um den Stil der Bildlaufleiste anzupassen. Zu diesen Pseudoelementen gehören:

1. ::-webkit-scrollbar: Wird in Chrome- und Safari-Browsern verwendet, um die Größe, Form und den Stil der Bildlaufleiste zu steuern.

Beispielcode:

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
}

2. ::-webkit-scrollbar-thumb: Ein Schieberegler zur Steuerung der Bildlaufleiste, Sie können ihn ändern Eigenschaften wie Größe, Transparenz, Rahmen- und Hintergrundfarbe. Wenn der Stil des Pseudoelements nicht geändert wird, wird der Standardstil des Browsers verwendet.

Beispielcode:

::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}

::-webkit-scrollbar-thumb:active {
  background-color: #6d6d6d;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
  opacity: 0.7;
}

3. ::-webkit-scrollbar-track: Der Schieberegler zur Steuerung der Bildlaufleiste, Sie können ihn ändern Eigenschaften wie Größe, Hintergrundfarbe und abgerundete Ecken.

Beispielcode:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

4. ::-webkit-scrollbar-corner: Wird zur Steuerung der Ecke der Bildlaufleiste verwendet und kann diese ändern Hintergrundeigenschaften wie Farbe und abgerundete Ecken. Dieses Pseudoelement kann in verschiedenen Browsern unterschiedliche Auswirkungen haben.

Beispielcode:

::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
  border-radius: 8px;
}

Darüber hinaus können Sie auch einige andere CSS-Eigenschaften verwenden, um den Stil der Bildlaufleiste zu steuern, z. B. scrollbar-color, Bildlaufleistenbreite usw. Es ist zu beachten, dass diese Attribute noch nicht mit allen Browsern kompatibel sind. Wenn Sie die Kompatibilität sicherstellen müssen, wird empfohlen, das Pseudoelement ::-webkit-scrollbar zu verwenden, um die Bildlaufleiste zu verschönern.

Kurz gesagt, die Verschönerung und Implementierung benutzerdefinierter Bildlaufleistenstile spielt eine Schlüsselrolle für die Bedeutung der Seite. Durch die Verwendung von Pseudoelementen und die Kontrolle von Stilen können wir die Bildlaufleiste unserer Website schöner gestalten und ein personalisierteres Verhaltenserlebnis hinzufügen, wodurch der Widerstand gegen das Erlebnis der jeweiligen Website erheblich verringert werden kann.

Schließlich ist es am besten, den Produktionsbedarf zu kennen, bevor Sie diese chaotischen Dinge tun, egal auf welchem ​​Niveau oder Niveau Sie sich befinden!

Das obige ist der detaillierte Inhalt vonSo verschönern und passen Sie Bildlaufleisten mit CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!