Wie kann ich die Höhe einer Bildlaufleiste in CSS anpassen?

Anpassen der Höhe der Bildlaufleiste

Um die Höhe einer Bildlaufleiste zu ändern, ist es wichtig, den strukturellen Aufbau einer Bildlaufleiste zu verstehen. Eine Bildlaufleiste besteht aus mehreren Elementen, darunter:

• Bildlaufleisten-Miniatur: Stellt den ziehbaren Bereich dar, den Benutzer zum Scrollen manipulieren.
• Bildlaufleistenspur: Der Hintergrundbereich, in dem sich der Daumen bewegt.

Um den gewünschten Effekt zu erzielen, der im bereitgestellten Bild gezeigt wird, ist Folgendes erforderlich:

1. Definieren Sie einen Start- und Endpunkt für den Bildlaufleisten-Daumen, um sicherzustellen, dass nur innerhalb eines bestimmten Bereichs gescrollt wird.
2. Erstellen Sie eine Ersatz-Bildlaufspur, die die Standardspur ersetzt.

Hier ist ein Beispiel-Codeausschnitt, der zeigt, wie das geht Um dies zu erreichen:

<code class="css">.wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  /* Create a fake scroll track */
  &::after {
    content: '';
    position: absolute;
    width: 5px;
    height: calc(100% - 20px);
    z-index: -1;
    top: 10px;
    background: #666;
    right: -1px;
  }

  /* Customize the scrollbar properties */
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: red;
    border: none;
    border-radius: 5px;
  }

  /* Define the end and start points of the scrollbar thumb */
  &::-webkit-scrollbar-track-piece:end {
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar-track-piece:start {
    margin-top: 10px;
  }
}</code>

Dieses Code-Snippet erstellt eine benutzerdefinierte Bildlaufleiste mit einer Höhe von 50 %, wie im bereitgestellten Bild angegeben. Dazu wird die Größe des Bildlaufleisten-Daumens angepasst und eine gefälschte Bildlaufspur erstellt, um die ursprüngliche zu ersetzen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe einer Bildlaufleiste in CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!