Webkit Scrollbar Buttons?

Hey,

Ich habe bei mir auf der Webseite jetzt mal die Scrollbars überarbeitet und dabei ist mir aufgefallen dass es bei Webkit keine Buttons mehr geliefert werden. Stattdessen gibt es farbige Klötze. SVG Images als Button gehen auch nicht, da dort weiterhin die Klötze bleiben.

Ich will einfach solche Buttons haben wie bei Firefox, aber mit Webkit damit ich die dicke frei anpassen kann.

Bitte hat einer eine Lösung für die Sauerei die Google da gemacht hat...

Answer 1

[regex9]

Chris Coyier hat in einem Blogartikel auf CSS-Tricks die verschiedenen Bestandteile und Zustände zusammengefasst, aus denen sich webkit-Scrollbars zusammenbauen.

Ein Beispiel einer breiteren, abgerundeten Vertikalscrollbar mit Pfeilbuttons könnte so aussehen:

:root {
  --main: #ffaa00;
  --hover: #ffdd00;
  --track: #eee;
}

::-webkit-scrollbar {
  width: 30px;
}

::-webkit-scrollbar-thumb {
  background: var(--main);
  background-clip: padding-box;
  border: 0.1em solid var(--track);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hover);
}

::-webkit-scrollbar-track {
  background: var(--track);
}

::-webkit-scrollbar-button:single-button {
  background: var(--track);
  border: 15px solid transparent;
  display: block;
  height: 15px;
  width: 15px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-bottom-color: var(--main);
  border-top-width: 0;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-bottom-color: var(--hover);
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  border-bottom-width: 0;
  border-top-color: var(--main);
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-top-color: var(--hover);
}

.scroll-container {
  height: 200px;
  overflow-y: scroll;
  width: 300px;
}

Die scroll-container-Klasse muss für dieses Beispiel im HTML dem Container zugeordnet werden, welcher scrollbar sein soll.

Die Pfeile werden hier mittels Rahmen gezeichnet. Du könntest aber ebenso SVG-Bilder (via background-image) einsetzen.

Comments

[jonatanktk]

Hab ich probiert, aber naja, dann sind die komisch doppelt überall.
Ich habe mich jetzt letztenendes dazu entschieden Webkit Styles zu löschen und die Firefox Variablen zu nutzen, damit bekomme ich das bisher beste Ergebnis.

[regex9]

@jonatanktk

Was genau ist doppelt?

Answer 2

[CoSci]

Scrollbars liesen sich schon immer sehr schlecht mit CSS anpassen, wenn du die Scrollbars in allen Browsern einheitlich auf deiner Webseite darstellen willst, musst du Javascript verwenden wenn ich mich richtig erinnere.