Wie kann ich die horizontale Bildlaufleiste per CSS formatieren?

Lesezeit: 2 Minuten

Benutzer-Avatar
Romanoti

Ich habe meine vertikalen Bildlaufleisten mit dem folgenden Code gestaltet:

::-webkit-scrollbar {
  width: 4px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}

Jetzt sieht meine vertikale Bildlaufleiste so aus:

Geben Sie hier die Bildbeschreibung ein

Meine horizontale Bildlaufleiste sieht jedoch so aus:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich eine Höhe von 2-4px dafür einstellen?

  • Entsprechend Dieser Artikel da ist ein :horizontal Pseudoklasse…

    – Ketzeraffe

    2. Juni 2017 um 17:18 Uhr

Benutzer-Avatar
Roko C. Buljan

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

denn logischerweise kann man a nicht erzwingen vertikale Bildlaufleiste sicher sein Höhe (da vom aufgestellten Elternteil vorgegeben) – also z height Eigentum ist das Ziel horizontale Bildlaufleiste Höhe – und und umgekehrt (width für die Breite der vertikalen Bildlaufleiste.).

  • Das Hinzufügen von Höhe löste meine horizontale Bildlaufleistenbreite (Lösung für Überlauf-x: automatische horizontale Bildlaufleiste)

    – Sparkz

    15. Mai 2020 um 6:20 Uhr

  • Du hast meinen Tag gerettet, Bruder!

    – winterhart

    7. Januar um 7:00 Uhr

Dies kann helfen

   ::-webkit-scrollbar{
        height: 4px;
        width: 4px;
        background: gray;
    }
    ::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
    }

::-webkit-scrollbar:horizontal{
  height: 8px;
  background-color: red;
}
::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
        
    }

  • Bitte erläutern Sie Ihre Lösung. Antworten, die keine Erklärung haben und nur Code sind, werden als geringer Aufwand gekennzeichnet.

    – Cursorrux

    9. September 2021 um 12:57 Uhr

Benutzer-Avatar
Shruti

Versuche dies

::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 8px;
}

Benutzer-Avatar
Abdulbasit

Genau wie @roco oben angemerkt hat, da die Höhe der vertikalen Bildlaufleiste nicht geändert werden kann, würde die definierte Höhe für die horizontale Leiste verwendet, aber mit der -webkit-scrollbar allein wird Ihr Problem mit der horizontalen Leiste lösen, aber auch dazu führen, dass sich Ihre vertikale Bildlaufleiste abnormal verhält. Verwenden Sie für das beste Ergebnis diesen Code.

::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background: gray;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

::-webkit-scrollbar-thumb:horizontal{
    background: #000;
    border-radius: 10px;
}

Hinweis: Die -webkit-scrollbar wird in Firefox oder in Edge, frühere Version 79, nicht unterstützt.

Benutzer-Avatar
Pedro Fracassi

Innen ::-webkit-scrollbar selected, stellt die Höhe die horizontale Bildlaufleiste und die Breite die vertikale Bildlaufleiste dar. Sie können auch verwenden :horizontal Pseudoklasse.

1311500cookie-checkWie kann ich die horizontale Bildlaufleiste per CSS formatieren?

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

Privacy policy