Set the length of a horizontal scrollbar

Question

It would seem that this would be a duplicate question, however I cannot find anything on it.

I am trying to set the length of a scrollbar to 50% of the <div>

I am using webkit to hide the actual scrollbar and show and image instead, however the thumb of the scrollbar goes outside the slidebar img itself. So if i can shorten the scrollbar length it would solve all my issues.

Ideally I would like a webkit fix but am open to other ideas.

currently i have this for the css:

::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment  {}
    ::-webkit-scrollbar-thumb:horizontal {
            background:transparent url('images/sliderheart.png') no-repeat; 
            background-size:35px 35px;

            width: 35px;
            height: 35px;  
            background-position: center;
    }
    ::-webkit-scrollbar{height: 50px; width: 50px;}


    ::-webkit-scrollbar-track:horizontal{
    background:transparent url('images/sliderbar.png') no-repeat; 
    background-position: center; 
    }

Answer 1

So I figured it out and should share in-case someone else comes across the same issue.

I was barking up the wrong tree, instead of changing the actual scroll bar, I found this solution.

Make a start and stop position of the thumb like this:

::-webkit-scrollbar-button:end{height: 50px; width:30%;}
::-webkit-scrollbar-button:start{height: 50px; width:30%;}

Then size the background image to fit inside the start and end like this:

::-webkit-scrollbar-track:horizontal{
    background:transparent url('images/sliderbar.png') no-repeat; 
    background-position: center;
    background-size: 100% 35px; 
    }

Answer 2

Try this:

::-webkit-scrollbar{height: 50%; width: 50%;}