Wie kann ich die Höhe einer Bildlaufleiste mithilfe von CSS und HTML anpassen?

Anpassen der Höhe der Bildlaufleiste

Steuern der Größe der Bildlaufleiste

Um die Höhe der Bildlaufleiste zu ändern, ist es notwendig, ihre Struktur zu verstehen . Verweisen Sie auf das Bild unten, um die Komponenten der Bildlaufleiste zu visualisieren:

[Bild der Bildlaufleistenstruktur]

Um die Größe zu ändern, konzentrieren wir uns auf zwei Aspekte:

• Steuern, wo der Bildlaufleisten-Daumen (5) mit dem Scrollen beginnt und aufhört
• Simulieren einer gefälschten Bildlaufspur anstelle der Verwendung der Standard-Bildlaufspur (3)

Erstellen einer benutzerdefinierten Bildlaufleiste

Bedenken Sie den folgenden Code:

CSS:

<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>

HTML:

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

Dieser Code:

• Definiert eine gefälschte Bildlaufspur mithilfe des Nach-Pseudoelements des Seitenelements.
• Passt die Breite, den Hintergrund und die Daumenfarbe der Bildlaufleiste mithilfe von CSS-Eigenschaften an, die auf die Bildlaufleiste des Wrapper-Elements angewendet werden.
• Fügt Ränder hinzu zu den Spurstücken der Bildlaufleiste, um die Start- und Endpunkte des Bildlaufdaumens zu steuern.

Durch die Implementierung dieser Änderungen können Sie die Höhe der Bildlaufleiste ändern, um Ihren Designanforderungen gerecht zu werden.

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