LabEx
LoginBeitreten

Das Anpassen von Scrollbarkeystilen mit CSS

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir untersuchen, wie man den Scrollbarkeystil mit CSS anpassen kann. Wir werden die ::-webkit-scrollbar-Eigenschaft verwenden, um den Scrollbalken zu gestalten, einschließlich der Scrollbarkennlinie und -aufzeichnung. Am Ende dieses Labs werden Sie einen besseren Überblick darüber haben, wie man benutzerdefinierte Scrollbalken erstellt und die Benutzererfahrung Ihrer Website verbessert.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Benutzerdefinierter Scrollbalken

index.html und style.css wurden bereits in der VM bereitgestellt.

Um den Scrollbarkeystil für Elemente mit scrollbarem Überlauf anzupassen, können Sie ::-webkit-scrollbar verwenden, um das Scrollbarelement zu gestalten, ::-webkit-scrollbar-track um die Scrollbarkennlinie (den Hintergrund des Scrollbalkens) zu gestalten und ::-webkit-scrollbar-thumb um den Scrollbalkenknopf (das ziehbare Element) zu gestalten. Beachten Sie jedoch, dass diese Technik nur in WebKit-basierten Browsern funktioniert und die Scrollbarkeystilgebung nicht auf einem Standardsweg steht. Hier ist ein Beispiel dafür, wie diese Selektoren in HTML und CSS verwendet werden:

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e3f20;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4a7856;
  border-radius: 12px;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Benutzerdefinierter Scrollbalken" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.