Wie kann ich die Höhe der Bildlaufleiste in CSS anpassen, um eine optisch ansprechende und funktionale Webseite zu erstellen?

Anpassen der Höhe der Bildlaufleiste

Die Steuerung der Höhe von Bildlaufleisten ist eine nützliche Technik, um die visuelle Attraktivität und Funktionalität von Webseiten zu verbessern. In diesem Artikel wird eine Methode zum Anpassen der Höhe der Bildlaufleiste untersucht, um dem Beispiel im Bild zu ähneln.

Struktur der Bildlaufleiste verstehen

Zunächst ist es wichtig, die Struktur einer Bildlaufleiste zu verstehen . Es besteht aus mehreren Elementen:

1. Bildlaufleiste: Der Hauptbehälter der Bildlaufleiste.
2. Bildlaufleisten-Schaltfläche: Die Pfeile oben und unten.
3. Scrollbar-Spur: Der vertikale oder horizontale Raum, innerhalb dessen sich der Scrollbar-Daumen bewegt.
4. Scrollbar-Spurstück: Segmente der Scrollbar Spur.
5. Bildlaufleisten-Daumen: Das bewegliche Element, das die Position innerhalb des Inhalts anzeigt.
6. Bildlaufleisten-Ecke: Der Schnittpunkt von Bildlaufleiste und Bildlaufleiste Spur.
7. Resizer: Ein optionales Element, mit dem die Größe der Bildlaufleiste geändert werden kann.

Anpassen der Bildlaufleistenhöhe

Um die gewünschte Höhe der Bildlaufleiste zu erreichen, müssen Sie:

1. den Start- und Endpunkt des Bildlaufleisten-Daumens festlegen. Dadurch wird bestimmt, wo der Bildlauf des Daumens beginnt und aufhört.
2. Simulieren Sie eine Scroll-Spur.Eine Scroll-Spur vermittelt die Illusion einer kontinuierlichen Spur, obwohl die eigentliche Spur in zwei Teile geteilt ist.

Code-Implementierung

Das folgende Code-Snippet zeigt, wie diese Anpassungen umgesetzt werden:

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

Dieser Code erstellt eine Bildlaufleiste mit einer Höhe von 5 Pixeln und einer scheinbar durchgehenden Spur. Die simulierte Spur wird mit dem Pseudoelement ::after erstellt, während die Breite und der Spurhintergrund mithilfe von CSS-Eigenschaften angepasst werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe der Bildlaufleiste in CSS anpassen, um eine optisch ansprechende und funktionale Webseite zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!