So fügen Sie Pfeile mit der -webkit-scrollbar-button hinzu

Lesezeit: 6 Minuten

Ich habe eine benutzerdefinierte Bildlaufleiste. Seitdem ich das gemacht habe, werden die Pfeile der Bildlaufleiste nicht mehr angezeigt.

.scrollbar::-webkit-scrollbar-thumb {
    background-color: ##00a7e0;
  }

  .scrollbar::-webkit-scrollbar-track {
    background-color: #F5F5F5;
  }

  .scrollbar::-webkit-scrollbar-button {
    ????;
  }

Was muss ich in .scrollbar::-webkit-scrollbar-button hinzufügen, damit meine Pfeile wieder angezeigt werden?

  • Ähnlich -> stackoverflow.com/questions/16761611/adding-arrows-to-scrollbar

    – Sol

    30. November 2017 um 15:28

  • @ovokuro Ich habe diesen Beitrag auch gesehen, aber ist er wirklich die einzige Lösung? Können die Pfeile nur durch ein Bild hinzugefügt werden?

    – Blaue Katze

    30. November 2017 um 15:51 Uhr

(Super spät zur Party, aber trotzdem)

Sie können Scrollbar-Schaltflächen mit dem ::-webkit-scrollbar-button-Selektor formatieren (siehe dieser Blogbeitrag (für eine vollständige Aufschlüsselung der Pseudo-Selektoren der Webkit-Bildlaufleiste), aber es ist viel schwieriger, sie dazu zu bringen, Pfeile anzuzeigen, und die meisten Leute scheinen entweder Hintergrundbilder zu verwenden oder Schaltflächen ganz zu überspringen.

Hier ist eine Lösung mit CSS-Dreiecken für Pfeile:

https://stackoverflow.com/a/46229219/1202275

und noch eines (basierend auf dem oben genannten, nur vertikale Bildlaufleiste, aber die Idee ist dieselbe):

::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

(https://codepen.io/DarthVeyda/pen/eLLbXa)

  • Es sieht aus wie -webkit-scrollbar-button funktioniert nicht mehr? Ich verwende einen Mac und es wird zumindest nicht angezeigt

    – Zach Saucier

    25. Februar um 15:55 Uhr

Patrik Laszlos Benutzeravatar
Patrik Laszlo

Eine neuere und bessere Version ist diese: Wie wechsle ich zur dunklen Bildlaufleiste von Chrome, wie es GitHub tut?

Hier ist die vollständige Bildlaufleiste mit Schaltflächen im Dunkelmodus:

https://codepen.io/patrikx3/pen/ZEBQQyV

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: rgb(64, 64, 64);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(96, 96, 96);
    background-clip: padding-box;
    border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(112, 112, 112);
}

::-webkit-scrollbar-thumb:active {
    background-color: rgb(128, 128, 128);
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: rgb(64, 64, 64);

    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="50,00 0,50 100,50"/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="0,0 100,0 50,50"/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="0,50 50,100 50,0"/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,50 50,100 50,0"/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="0,50 50,100 50,0"/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="0,0 0,100 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,0 0,100 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="0,0 0,100 50,50"/></svg>");
}

  • Eine neuere und bessere Version ist diese: stackoverflow.com/questions/65940522/…

    – Patrik Laszlo

    7. Februar 2022 um 19:54

  • Ihre SVG-Codierung auf den Scroller-Dreiecken hat mir bei diesem Beitrag geholfen.

    – Volomike

    6. Juni 2022 um 0:16

  • Es sieht aus wie -webkit-scrollbar-button wird in Chrome nicht mehr unterstützt? Ich verwende einen Mac und es wird zumindest nicht angezeigt

    – Zach Saucier

    25. Februar um 15:56 Uhr

Hier ist eine Light-Version.

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color:#eee;
}

::-webkit-scrollbar-thumb {
    background-color: #8f8e8e;
    background-clip: padding-box;
    border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(112, 112, 112);
}

::-webkit-scrollbar-thumb:active {
    background-color: rgb(128, 128, 128);
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #eee;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(73, 73, 73)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="50,00 0,50 100,50"/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(73, 73, 73)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image

  • Wie wäre es mit horizontalen Pfeilen?

    – suhailvs

    29. März 2021 um 6:21 Uhr

  • Kopieren Sie die Vertikale und ändern Sie sie einfach in Horizontal.

    – Ram Alcantara

    13. April 2021 um 23:47 Uhr

Hier ist ein noch fantastischeres Design Codepen

Verwendetes Dreieck SVG umgewandelt in Daten-URI

::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-radius: 5px 5px 0 0;
  height: 16px;
  width: 16px;
  background-position: center 4px;
  background-image: url("data:image/svg+xml;utf8,<svg 
  xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(121, 
  255, 108)"><polygon points="50,00 0,50 100,50"/></svg>");
}

1451330cookie-checkSo fügen Sie Pfeile mit der -webkit-scrollbar-button hinzu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy