teelou teelou - 12 days ago 6
CSS Question

CSS 3 scrollbar - add padding and cursor?

How can I add these two things on the scrollbar?


  1. padding around the scrollbar

  2. a cursor when you hover the scrollbar



This is my code:

#style-4::-webkit-scrollbar-track
{
background-color: #fff;
}

#style-4::-webkit-scrollbar
{
width: 5px;
background-color: #fff;

}

#style-4::-webkit-scrollbar-thumb
{
background-color: #ccc;

}

#style-4::-webkit-scrollbar-thumb:hover
{
background-color: #666;
cursor: pointer;
}


You can see it here. I want to add the padding like the ones on cssdeck.

Is it possible?

Answer

About that padding. Sample 5px padding from left

#style-4::-webkit-scrollbar {
    width: 10px; /* add 5px */
    ...
}

#style-4::-webkit-scrollbar-thumb {
    box-shadow: inset 5px 0 0 0 white; /* change color to your bg color */
    ...
}

Adding cursor: pointer to every -webkit-scrollbar element does not unfortunately work.