Wie kann ich die weiße Ecke mit Webkit-Scrollbar einfärben?

Lesezeit: 3 Minuten

Joe Pigott

ich benutze ::-webkit-scrollbar um eine benutzerdefinierte Bildlaufleiste in Chrome zu erstellen. Ich habe ein border-radius: 10px und dabei gibt es oben weiße Ecken:

Tut mir leid, es ist etwas schwer zu erkennen, da es sich um eine Bildlaufleiste handelt.

Ich möchte, dass die Ecken die gleiche Farbe haben wie das Header-Div (#dadae3). Gibt es eine Möglichkeit, die weißen Ecken nur mit CSS zu entfernen, ohne die Stile der Bildlaufleiste zu ändern?

CSS (gesamt):

body {
  padding: 0;
  margin: 0
}
::-webkit-scrollbar {
  width: 13px;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
  background: #dadae3;
  border-radius: 10px;
  border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
  background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
  background: #aeaeb5
}

HTML:

<div style="background: #dadae3; width: 100%; height: 30px;"></div>
<div style="width: 100%; height: 1000px"></div>

Sie müssen die einstellen ::-webkit-scrollbar-corner Pseudoelement, z

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

Dies sollte akzeptiert werden: Auch wenn es über 1 Jahr zu spät ist, hat es das gleiche Problem für mich in Chrome 43 gelöst

– Anton

17. Juni 2015 um 16:27 Uhr
Danke. Auch wenn ich dieses Projekt aufgegeben habe, ist es immer noch sehr hilfreich

– Joe Pigott

1. Dezember 2015 um 3:26 Uhr

Sie können die einstellen background-color Eigenschaft für das Pseudoelement -webkit-scrollbardabei können Sie die “Eckenfarbe” einstellen.

Ja, das funktioniert. Aber wenn Sie nach unten scrollen, zeigt es das #dadae3 gegen das weiße. Würde ich das einstellen background-color zu transparent? Edit: Nein, das würde ich nicht setzen background-color als transparent. Dies zeigt sich auch als weiße Ecken.

– Joe Pigott

27. November 2013 um 2:59 Uhr
Es ist bereits transparent (versuchen Sie, dem Ausgabe-Iframe von Fiddler eine Hintergrundfarbe zu geben), aber denken Sie daran: Es ist eine Bildlaufleiste. Wenn etwas dahinter geht, löst es ein Scrollen aus, also kann nichts dahinter sein.

– Carlo Cannas

27. November 2013 um 3:03 Uhr
Ok, ich bezweifle, dass irgendjemand graue Ecken auf einer Bildlaufleiste bemerken würde. PS Dies wird wahrscheinlich bald auf einer Live-Site stattfinden (sobald ich meinen Server zum Laufen bringe >: D)

– Joe Pigott

27. November 2013 um 3:04 Uhr

Ich habe heute gegen diese Scrollbar-Ecke gekämpft, die Platz beansprucht und unnötige Lücken schafft. Wenn ich benutze overflow: auto Auf einem Container verschwindet diese Ecke der Bildlaufleiste vollständig, während die Bildlaufleiste selbst sichtbar bleibt.

Ich musste anpassen webkit-scrollbar-corner als farbiges Dreieck statt Quadrat.

Hier ist das Ergebnis, wie es geht. Mit Randtrick.

::-webkit-scrollbar-corner {
    background: transparent;
    width: 0;
    height: 0;
    border-left: 16px solid #8B7E79;
    border-top: 16px solid #8B7E79;
    border-bottom: 16px solid transparent;
    border-right: 16px solid transparent;
}

Omar

Versuchen Sie es damit

::-webkit-scrollbar-corner {
    background: transparent;
    width: 0;
    height: 0;
    border-left: 16px solid #8B7E79;
    border-top: 16px solid #8B7E79;
    border-bottom: 16px solid transparent;
    border-right: 16px solid transparent;
}

Ich stimme dafür, diese Antwort zu löschen. Da dies mit dieser Antwort identisch ist, kann ich nur davon ausgehen, dass sie als “Dankeschön” oder “Bestätigung” gepostet wurde. Bitte fügen Sie keine „Danke“- oder „Bestätigungs“-Antworten hinzu. Sobald Sie über einen ausreichenden Ruf verfügen, können Sie Fragen und Antworten abstimmen, die Sie als hilfreich empfunden haben. Aus Bewertung

– Trenton McKinney

1. September um 21:33 Uhr

Ich stimme dafür, diese Antwort zu löschen. Da dies mit dieser Antwort identisch ist, kann ich nur davon ausgehen, dass sie als “Dankeschön” oder “Bestätigung” gepostet wurde. Bitte fügen Sie keine „Danke“- oder „Bestätigungs“-Antworten hinzu. Sobald Sie über einen ausreichenden Ruf verfügen, können Sie Fragen und Antworten abstimmen, die Sie als hilfreich empfunden haben. Aus Bewertung

– Trenton McKinney

1. September um 21:33 Uhr

14341400cookie-checkWie kann ich die weiße Ecke mit Webkit-Scrollbar einfärben?

#CSS #html #Webkit