+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Change scrollbar width on hover (/showthread.php?tid=4292320)
Change scrollbar width on hover - Dennse - Jun 18, 2014
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 ツ - Jun 18, 2014
(Jun 18, 2014 05:22 AM)Dennse Wrote: 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_browsers#WebKit-based
* - Dennse - Jun 18, 2014
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 - Jun 18, 2014
(Jun 18, 2014 05:35 AM)Dennse Wrote: 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 ツ - Jun 18, 2014
(Jun 18, 2014 05:35 AM)Dennse Wrote: 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 - Jun 18, 2014
That's the closest I can find =/
http://jsfiddle.net/T79v7/
Check the result.