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?

回答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.

回答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.

回答3:

Try this one for Cursor

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

来源：https://stackoverflow.com/questions/40799493/css-3-scrollbar-add-padding-and-cursor