CSS 3滚动条-添加填充和光标？

Question

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 1

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.

Answer 2

Yes You can add it.

    #style-4:hover{
  padding:15px;
}

I think this is correct, if im wrong please let know what you expect.

Answer 3

Try this one for Cursor

#style-4:hover{
  cursor:pointer;
}