How can I style horizontal scrollbar by CSS?

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?

129820 次浏览
小开
最佳答案 
::-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.).

小开

This may help 

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

Try This

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

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

小开 

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

}

小开

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;
}

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


提交答案