So ändern Sie die Bildlaufleiste in CSS

Im Webdesign und der Webentwicklung sind Bildlaufleisten ein weit verbreitetes Element. Es ermöglicht Benutzern, auf der Seite zu scrollen und mehr Inhalte anzuzeigen. Allerdings stimmt der standardmäßige Stil der Bildlaufleiste des Browsers möglicherweise nicht mit dem Webdesign überein, was zu visuellen Unstimmigkeiten führt. Zu diesem Zweck können wir den Stil der Bildlaufleiste mithilfe von CSS ändern, um ihn besser in das Webdesign zu integrieren. In diesem Artikel wird erläutert, wie Sie Bildlaufleisten über CSS ändern.

1. Verstehen Sie die verschiedenen Teile der Bildlaufleiste

Bevor wir die Bildlaufleiste ändern, müssen wir die verschiedenen Teile der Bildlaufleiste verstehen. In den meisten Browsern besteht eine Bildlaufleiste aus vier Teilen: dem Schieberegler, der Spur, dem Abwärtspfeil und dem Aufwärtspfeil. Dabei bezieht sich der Schieberegler auf den Teil, der gezogen werden kann, die Spur ist der Bereich, in dem sich der Schieberegler bewegt, und der Abwärtspfeil und der Aufwärtspfeil sind die Schaltflächen zum Scrollen nach unten bzw. nach oben.

2. Ändern Sie die Farbe des Schiebereglers

Ändern wir zunächst die Farbe des Schiebereglers. Über den CSS-Pseudoelementselektor können wir den Schiebereglerteil auswählen und seine Farbe ändern. Der spezifische Code lautet wie folgt:

/* 选中滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #666;
}

Der obige Code ändert die Hintergrundfarbe des Schiebereglers in Dunkelgrau (#666) und kann bei Bedarf auch in andere Farben geändert werden.

Beachten Sie, dass die CSS-Stilnamen der Bildlaufleisten in verschiedenen Browsern leicht unterschiedlich sind. In Webkit-basierten Browsern wie Chrome, Safari usw. ist der Selektor „::-webkit-scrollbar-thumb“; in Firefox ist der Selektor „::-moz-scrollbar-thumb“; Im Browser lautet der Selektor „::-ms-scrollbar-thumb“.

3. Ändern Sie die Spurfarbe und den Hintergrund.

Als nächstes ändern wir die Spurfarbe und den Hintergrund. Verwenden Sie den Pseudoelement-Selektor, um den Spurabschnitt auszuwählen und seinen Stil schiebereglerartig zu ändern. Der spezifische Code lautet wie folgt:

/* 选中轨道部分 */
::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

Der obige Code ändert die Hintergrundfarbe der Spur in gebrochenes Weiß (#eee) und legt den Eckenradius des Rahmens auf 10 Pixel fest. Auch dies kann je nach Bedarf auf andere Farben und Eckenradien geändert werden.

4. Ändern Sie den Pfeilstil

Abschließend ändern wir den Pfeilstil. Im Gegensatz zu Schiebereglern und Spuren verfügen Pfeile nicht über unabhängige Selektoren. Wir müssen einen kombinierten Selektor verwenden, um den Stil der Pfeile zu ändern. Der spezifische Code lautet wie folgt:

/* 选中滚动条按钮 */
::-webkit-scrollbar-button {
  background-color: #666;
  display: block;
}

/* 选中向上箭头 */
::-webkit-scrollbar-button:start {
  height: 20px;
  background-image: url('up-arrow.svg');
  background-size: contain;
}

/* 选中向下箭头 */
::-webkit-scrollbar-button:end {
  height: 20px;
  background-image: url('down-arrow.svg');
  background-size: contain;
}

Im obigen Code haben wir zunächst die gesamte Bildlaufleistenschaltfläche über den Selektor „::-webkit-scrollbar-button“ ausgewählt und ihre Hintergrundfarbe auf Dunkelgrau gesetzt (#666). und legen Sie fest, dass es als Element auf Blockebene angezeigt wird (display:block;). Als nächstes verwenden wir die Kombinationsselektoren „::-webkit-scrollbar-button:start“ und „::-webkit-scrollbar-button:end“, um den Aufwärtspfeil bzw. den Abwärtspfeil auszuwählen und deren Höhe auf 20 Pixel festzulegen ( height :20px;) und fügen Sie dem Pfeil mithilfe der Eigenschaften „Hintergrundbild“ und „Hintergrundgröße“ einen benutzerdefinierten Stil hinzu. Es ist zu beachten, dass das Pfeilbild im Voraus vorbereitet und unter Verwendung des richtigen relativen Pfads mit der CSS-Datei verknüpft werden muss.

5. Zusammenfassung

Bisher haben wir gelernt, wie man den Stil der Bildlaufleiste mithilfe von CSS ändert. Durch Ändern der Stilattribute wie Farbe, Hintergrund und Größe von Schiebereglern, Spuren und Pfeilen können Sie Bildlaufleisten besser in das Webdesign integrieren und so das Benutzererlebnis verbessern. Es ist zu beachten, dass der CSS-Stilname der Bildlaufleiste in verschiedenen Browsern unterschiedlich sein kann und entsprechend der tatsächlichen Situation angepasst werden muss.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!