[Dennse]

Hi guys!

I'm working on a new design, and I'm trying to mess a bit with the scrollbar. I want the scrollbar to be thin as f*** (5px wide) by default, but when hovering over, it should get a little bigger (15px wide fx).

I tried this, but it didn't work

Code

*::-webkit-scrollbar{
width:5px;
background-color:#cccccc;
}

*::-webkit-scrollbar:hover{
width:15px;
}

Can anyone help?

[Stewie ツ]

Hi guys!

I'm working on a new design, and I'm trying to mess a bit with the scrollbar. I want the scrollbar to be thin as f*** (5px wide) by default, but when hovering over, it should get a little bigger (15px wide fx).

I tried this, but it didn't work

Code

*::-webkit-scrollbar{
width:5px;
background-color:#cccccc;
}

*::-webkit-scrollbar:hover{
width:15px;
}

Can anyone help?

Take a look here:
http://jsfiddle.net/2N93Y/1/

As a reminder, these browsers support webkit:
http://en.wikipedia.org/wiki/List_of_web...bKit-based

[Dennse]

Hi Stewie!

Thanks for you answer, but it's not what I'm looking for. I already have the basic design figured out, but I want the scrollbar to become wider when you hover over it. :)

[lol]

Hi Stewie!

Thanks for you answer, but it's not what I'm looking for. I already have the basic design figured out, but I want the scrollbar to become wider when you hover over it. :)

I know what you mean. Let me try find it!

[Stewie ツ]

Hi Stewie!

Thanks for you answer, but it's not what I'm looking for. I already have the basic design figured out, but I want the scrollbar to become wider when you hover over it. :)

Well that can't be achieved only by CSS. You pretty much have 2 options in this case:

(1) Wrap the whole thing in a container div and use div.container:hover::-webkit-scrollbar to alter the scrollbar's width - but this will be activated once the end-user hovers over the content not just the scrollbar area (I guess you don't want this).

(2) By using jQuery. Here is an example: http://jsfiddle.net/PVZB8/139/

This one is à la Facebook. So it's hidden until until hover. You can use that as starting point if you don't have much jQuery knowledge or just simply write a quick function.

Long story short, you will need to bring in some jQuery to achieve that functionality. There might some alternatives solutions but I'm not aware of any other ones so I suggest you go with the jQuery option, will save you some precious time.

[lol]

That's the closest I can find =/
http://jsfiddle.net/T79v7/

Check the result.