So verwenden Sie CSS zum Erstellen benutzerdefinierter Bildlaufleistenstile

So verwenden Sie CSS, um benutzerdefinierte Effekte des Bildlaufleistenstils zu erstellen

In den letzten Jahren ist die Anpassung von Bildlaufleistenstilen zu einer der häufigsten Anforderungen im Webdesign geworden. Durch Anpassen des Stils der Bildlaufleiste können Sie die Ästhetik und das Benutzererlebnis der Webseite verbessern. In diesem Artikel wird ausführlich erläutert, wie Sie mithilfe von CSS benutzerdefinierte Effekte für den Bildlaufleistenstil erstellen, und es werden spezifische Codebeispiele bereitgestellt.

1. Passen Sie den Stil der Bildlaufleiste an

Um einen benutzerdefinierten Effekt des Bildlaufleistenstils zu erzeugen, müssen wir zunächst die Komponenten der Bildlaufleiste verstehen, einschließlich des Bildlaufleistenhintergrunds, des Schiebereglers (auch Daumen genannt), und die Bildlaufleiste Orbits (auch Spuren genannt) usw.

1. Hintergrundstil der Bildlaufleiste

Hintergrundstil der Bildlaufleiste definiert den Gesamtstil der Bildlaufleiste, z. B. Hintergrundfarbe, Rahmenstil usw. Hier ist ein Beispielcode:

::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

2. Slider-Stil

Der Slider-Stil definiert den Teil der Bildlaufleiste, der zum Verschieben von Inhalten verwendet wird. Sie können die Farbe, Form usw. des Schiebereglers anpassen. Das Folgende ist ein Beispielcode:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

3. Bildlaufleisten-Spurstil

Der Bildlaufleisten-Spurstil definiert die Hintergrundspur der Bildlaufleiste. Sie können den Stil der Spur anpassen, einschließlich Hintergrundfarbe, Rahmenstil usw. Das Folgende ist ein Beispielcode:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

2. Kompatibilität von Bildlaufleistenstilen

Die obigen Codebeispiele sind für Browser mit WebKit-Kern geschrieben, wie Chrome, Safari usw. Verschiedene Browser bieten unterschiedliche Unterstützung für Bildlaufleistenstile, daher müssen wir im Code Stilanpassungen für verschiedene Browser hinzufügen.

Das Folgende ist der Code zur Anpassung des Bildlaufleistenstils für verschiedene Browser:

/* Firefox */
 scrollbar-width: thin;
 scrollbar-color: #888 #f5f5f5;

/* Edge */
  scrollbar-width: thin;

/* Internet Explorer 10+ */
-ms-overflow-style: none;

/* Opera */
scrollbar-color: #888 #f5f5f5;

3. Erweiterte Anpassung des Bildlaufleistenstils

Zusätzlich zu den grundlegenden Hintergrund-, Spur- und Schiebereglerstilen können wir den Bildlaufleistenstil auch weiter anpassen. wie das Hinzufügen von Hover-Effekten, Klickeffekten usw.

Das Folgende ist ein Beispielcode, um den Effekt der Farbänderung der Bildlaufleiste zu erzielen, wenn die Maus darüber schwebt:

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  transition: background-color 0.3s;
}

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

IV Zusammenfassung

Durch die Verwendung von CSS können wir den Stil der Bildlaufleiste einfach anpassen, um die Schönheit zu verbessern Schönheit der Webseite. In diesem Artikel werden grundlegende Methoden zur Anpassung des Bildlaufleistenstils vorgestellt, einschließlich Hintergrund-, Schieberegler- und Spurstilen, und praktische Codebeispiele bereitgestellt. Gleichzeitig haben wir auch die Kompatibilität und erweiterte Anpassung von Bildlaufleistenstilen besprochen.

Ich hoffe, dieser Artikel kann Ihnen helfen, CSS zu verstehen und zu verwenden, um eine Anpassung des Bildlaufleistenstils zu erstellen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS zum Erstellen benutzerdefinierter Bildlaufleistenstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!