CSS: control the style of scrollbar

how to show scrollbar in html¶

we firstly need to know how to show scrollbar, this is controlled by the overflow attribute.

example code:

<div class="scroll-box">
     <p>
            Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante.
            Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
            blandit quam turpis, at mollis velit pretium ut. Nunc onsequat           efficitur ultrices. Nullam hendrerit posuere est.
     </p>
</div>

<style>
.scroll-box {
  width:500px;
  height:200px;
  overflow:X;    /* 'X' will be replaced by following attributes */ 
  background-color: #6c757d;
  white-space: nowrap;
}
</style>

overflow:auto : only show scrollbar when content exceeds assigned height and/or width

overflow:scroll: show scrollbar area regardless of whether the content exceeds

we can also assign which direction to show the scrollbar by adding -x or -y:

• overflow-x:scroll
• overflow-y:scroll

overflow:visible : default value, exceeding content won't be hidden but will show outside the container

overflow:hidden: exceeding content will be hidden

overflow:inherit: inherit the attribute from parent element

customize scrollbar¶

WebKit pseudo classes¶

Note: with my test, following pseudo classes only work well on Chrome but not Firefox

::-webkit-scrollbar             
::-webkit-scrollbar-button      
::-webkit-scrollbar-track        
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb        
::-webkit-scrollbar-corner      
::-webkit-resizer              

corresponding parts controlled by these pseudo classes:

source code  in ‘example code’

these pseudo classes can be used in at least three ways (replace x with button, track, etc):

#id_selector::-webkit-scrollbar-x{
    /* CSS attributes */
}
.class_selector::-webkit-scrollbar-x{
    /* CSS attributes */
}
::-webkit-scrollbar-x{
    /* CSS attributes */
}

if you want to customize specific elements, assign an id selector or class selector

directly use ::-webkit-scrollbar-x will affect all the elements in a page that have contents exceeded.

initialization and dependence should be noted¶

to customize a scrollbar, we should first declare a -webkit-scrollbar like:

#style1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

with this, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. Then we can use other pseudo classes.

or from names of these pseudo classes, we may notice that ::-webkit-scrollbar-x (replace x with button, track,thumb,corner, etc) are based on ::-webkit-scrollbar, which means:

• ::-webkit-scrollbar-x won't work if ::-webkit-scrollbar not defined.
• ::-webkit-resizer can be used independently

other tips:

• ::-webkit-resizer seems only working with <textarea></textarea> element.

example code¶

html:

<h3>scrollbar1</h3>
<div id="style1" class="scroll-box1">
    <p>....</p>
</div>
<hr>
<h3>scrollbar2</h3>
<textarea id="style2" class="scroll-box2">
    <p>...</p>
</textarea>

scrollbar1:

/* scrollbar1 */
.scroll-box1{
  width:300px;
  height:200px;
  overflow:auto;
  background-color: #6c757d;
  white-space: nowrap;
}
#style1::-webkit-scrollbar
{
    width: 13px;
    height:13px;
    background-color: #F5F5F5;
}
#style1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #5cb2ae;
}
#style1::-webkit-scrollbar-corner{
    background-color:yellowgreen;
}

scrollbar2:

/* scrollbar2 */
.scroll-box2{
  width:300px;
  height:200px;
  overflow:scroll;
  background-color: #6c757d;
  white-space: nowrap;
}
#style2::-webkit-scrollbar
{
    width: 13px;
    height:13px;
    background-color: #F5F5F5;
}
#style2::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #5cb2ae;
}
#style2::-webkit-resizer{ 
   background-image: url(../images/resizer.png); 
   background-repeat: no-repeat;
   background-position: center;
   background-color: transparent;
   background-size: cover;
}
#style2::-webkit-scrollbar-track{
  background-color:lightblue;
}
#style2::-webkit-scrollbar-button {
  background-color:#5cb2ae;
}
#style2::-webkit-scrollbar-button:vertical:end {
  background-image: url(../images/arrow-2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#style2::-webkit-scrollbar-button:vertical:start {
  background-image: url(../images/arrow-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#style2::-webkit-scrollbar-button:horizontal:end{
  background-image: url(../images/arrow-4.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#style2::-webkit-scrollbar-button:horizontal:start {
  background-image: url(../images/arrow-3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}