How can I style horizontal scrollbar by CSS?

Asked 2/6, 2017 at 17:5 Answered 8/11, 2021 at 21:1

118

I styled my vertical scrollbars with the following code:

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

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

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

Now, my vertical scrollbar looks like this:

However, my horizontal scrollbar looks like this :

How can I set a 2-4px height for it?

Toupee answered 2/6, 2017 at 17:5 Comment(1)

According to this article there is a :horizontal pseudo class... – Benisch 2/6, 2017 at 17:18

303

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

since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).

Consubstantiation answered 2/6, 2017 at 17:22 Comment(2)

adding height solved my horizontal scrollbar width (solution for overflow-x: auto horizontal scrollbar) – Erbes 15/5, 2020 at 6:20

You made my day bro! – Subsistence 7/1, 2022 at 7:0

This may help

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

Paramorphism answered 2/6, 2017 at 17:46 Comment(4)

thank you so much! I was looking for this exactly, this is very useful! – Matheson 4/7, 2023 at 17:0

Should be the accepted answer imho working with the :horizontal pseudo element – Viridi 5/10, 2023 at 14:29

Unfortunately, these pseudo-elements violate CSS syntax (parsing rules) and are stripped or crash CSS tools like PostCSS or LightningCSS :( – Urbanite 19/3 at 7:39

@IvanKleshnin as expected, these aren't standard CSS pseudo-elements. They are experimental features which could be changed at any moment. – Jellybean 21/4 at 21:8

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

Grieg answered 9/9, 2021 at 10:19 Comment(2)

Please explain your solution. Answers which do not have an explanation and are only code get flagged as low effort. – Tenpin 9/9, 2021 at 12:57

Snippet is empty... – Viridi 5/10, 2023 at 14:28

Just like @roco has noted above, since the vertical scroll bar's height can not be modified then the height defined would be used for the horizontal bar, but using the -webkit-scrollbar alone will solve your issue with the horizontal bar but will also make your vertical scroll bar behave abnormally, for the best result use this 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;
}

<!-- Just Focus with the CSS codes -->  
<body style='width:200%'>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at congue augue, sed dictum odio. Nunc imperdiet, lacus et consequat molestie, est lorem viverra mauris, id aliquet tortor purus vitae risus. In hac habitasse platea dictumst. Nulla ultrices fermentum maximus. Pellentesque accumsan condimentum finibus. Sed a mattis elit. Phasellus vel ullamcorper erat, eu euismod lorem. Nulla eu lorem ac mauris fringilla faucibus vel commodo ipsum.
    Phasellus quis elementum dolor. Nulla dui nisl, ultrices et nulla pulvinar, placerat auctor libero. Morbi tristique vestibulum massa et varius. Donec posuere, nisl ac rutrum dictum, turpis tellus fringilla libero, ac feugiat elit metus ac augue. Nam justo turpis, blandit eget dui sit amet, molestie suscipit augue. Morbi erat velit, maximus a sem at, efficitur tempus mauris. In iaculis volutpat eros, vitae porttitor neque facilisis ac. Morbi ac maximus nunc. Fusce consectetur faucibus eros, nec aliquet nunc posuere vitae. Ut venenatis elementum lacus interdum finibus.
    </p>

 </body>

note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.

Quadrangular answered 8/11, 2021 at 21:1 Comment(0)

Try This

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

Managua answered 17/1, 2019 at 6:35 Comment(0)

Inside ::-webkit-scrollbar selected, the height represents the horizontal scrollbar and the width represents the vertical scrollbar. You can also use :horizontal psuedoclass.

Success answered 23/6, 2020 at 13:48 Comment(0)

Recommended topics

Hot tags