128

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:

enter image description here

However, my horizontal scrollbar looks like this :

enter image description here

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

John Slegers
47.4k23 gold badges206 silver badges173 bronze badges
asked Jun 2, 2017 at 17:05
2
  • 3
    According to this article there is a :horizontal pseudo class... Commented Jun 2, 2017 at 17:18
  • Here is a JSFiddle demonstrating usage of all (except 2) of the pseudoclasses applied to the webkit pseudoelements: jsfiddle.net/CSSBurner/s9m18rh4 ... hoping this may help Commented Aug 13, 2024 at 13:43

6 Answers 6

319 
::-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.).

answered Jun 2, 2017 at 17:22
Sign up to request clarification or add additional context in comments.

2 Comments

adding height solved my horizontal scrollbar width (solution for overflow-x: auto horizontal scrollbar)
You made my day bro!
68

This may help 

 ::-webkit-scrollbar{
 height: 4px;
 width: 4px;
 background: gray;
 }
 ::-webkit-scrollbar-thumb:horizontal{
 background: #000;
 border-radius: 10px;
 }
answered Jun 2, 2017 at 17:46

4 Comments

thank you so much! I was looking for this exactly, this is very useful!
Should be the accepted answer imho working with the :horizontal pseudo element
Unfortunately, these pseudo-elements violate CSS syntax (parsing rules) and are stripped or crash CSS tools like PostCSS or LightningCSS :(
@IvanKleshnin as expected, these aren't standard CSS pseudo-elements. They are experimental features which could be changed at any moment.
16 

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

answered Sep 9, 2021 at 10:19

3 Comments

Please explain your solution. Answers which do not have an explanation and are only code get flagged as low effort.
Snippet is empty...
:horizontal does the trick, thanks!
13

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.

answered Nov 8, 2021 at 21:01

Comments

5

Try This

::-webkit-scrollbar {
 height: 8px;
 overflow: visible;
 width: 8px;
}
Dinesh undefined
5,5262 gold badges22 silver badges41 bronze badges
answered Jan 17, 2019 at 6:35

Comments

1

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

Pedro Fracassi
3,9834 gold badges20 silver badges38 bronze badges
answered Jun 23, 2020 at 13:48

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.