Wie erstelle ich eine benutzerdefinierte Bildlaufleiste mit reduzierter Höhe in der Webentwicklung?

So passen Sie die Höhe der Bildlaufleiste an

In diesem Fall besprechen wir die Anpassung des Erscheinungsbilds von Bildlaufleisten, insbesondere durch Anpassen ihrer Höhe. Um dies zu erreichen, müssen wir die Struktur einer Bildlaufleiste verstehen, die unten dargestellt ist:

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

Das Ziel ist zweifach: zu ändern, wo der Bildlaufleisten-Daumen (5) beginnt und endet, und um anstelle der vorhandenen Spur eine künstliche Bildlaufspur zu erstellen (3). Mithilfe von CSS können diese Änderungen wie folgt implementiert 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 gefälschte Bildlaufleiste, die kürzer als die tatsächliche Bildlaufleiste erscheint und so den Eindruck einer Höhenanpassung erweckt. Das Element ::-webkit-scrollbar-track wird verwendet, um die ursprüngliche Bildlaufleiste auszublenden, während das Pseudoelement ::after die gefälschte Bildlaufleiste erstellt. Das Element ::-webkit-scrollbar-thumb ist so gestaltet, dass es einem kürzeren Bildlaufleisten-Daumen ähnelt. Durch Anpassen der Eigenschaften „margin-top“ und „margin-bottom“ der Elemente ::-webkit-scrollbar-track-piece können die Start- und Endpunkte des Bildlaufleisten-Daumens geändert werden.

Dieser Code verkürzt effektiv die Erscheinungsbild der Bildlaufleiste für ein individuelles visuelles Erlebnis.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine benutzerdefinierte Bildlaufleiste mit reduzierter Höhe in der Webentwicklung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!