8

Is there a way to temporarily change the scrollbar width in FF or IE while I'm testing some layout code?

I remember reading something a while back about this being related to resolution, but can't quite remember. I tried changing the resolution of the computer itself, tried increasing browser font size, but both didn't work.

Update I've come across this thread that describes how to edit the settings from within Firefox, but it doesn't work smoothly, at least hasn't worked smoothly yet for me. The asker said it eventually worked for him, so I'll do more testing later.

goodan
  • 87
  • 1
  • 1
  • 4
  • What do you want this for anyway? :) – deceze Apr 02 '10 at 07:36
  • I'm trying to detect things like window size, browser size, body size and other browser features like scrollbar width, and I'm (of course) noticing discrepancies between FF and IE. So that was part of the testing I was doing, trying to change scrollbar width to further experiment with it. – goodan Apr 02 '10 at 08:09
  • @goodan if you're interested in scrollbar width I had given an answer some time ago which may be helpful http://stackoverflow.com/a/13382873/149636 – lostsource Jan 13 '13 at 14:35

3 Answers3

3
::-webkit-scrollbar {
  width: 6px; 
   background-color: rgba(0,0,0,0);
  -webkit-border-radius: 80px;
}
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb:vertical {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 80px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0,0,0,0.61);
  -webkit-border-radius: 80px;
}

/*Try this*/
Bhushan wagh
  • 187
  • 1
  • 14
  • 1
    This worked for me... but what if i don't want it to affect the main window scrollbar, but just a div.. i'm using it for just a div right now and it works – Paul Okeke Jul 26 '15 at 13:41
1

I think this might be what you are looking for...

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

It allows you to completely control the style of your scrollbars.

Zac
  • 12,637
  • 21
  • 74
  • 122
  • 1
    Just to be clear, this creates "fake" scrollbars using Javascript, which you could use to replace real scrollbars. That's as close as you'll get to custom scrollbars. – deceze Apr 02 '10 at 05:43
  • @deceze Thanks for pointing this out. This would be too powerful for me then, and may even not work for what I need, since I don't really need the power of custom scrollbars. Is there a setting in the browser or the operating system that can let me control the thickness of the browser? or even a way to change the resolution and get different thickness? – goodan Apr 02 '10 at 07:30
  • 1
    @goodan I don't think this is possible. A scrollbar is a scrollbar, and thank God websites aren't able to change them willy-nilly. IE and possibly one or two other browsers allowed customization of the scrollbar color scheme, but AFAIK that's about it. – deceze Apr 02 '10 at 07:34
  • @deceze, I should clarify, I'm not trying to change the scrollbar size for my site's visitor. Just on my own browser for testing purposes. I would have thought that would be super easy, alas. – goodan Apr 02 '10 at 08:21
  • @goodan That's understood, I was just saying it's not possible and that's a Good Thing™. :) – deceze Apr 02 '10 at 09:19
  • @deceze, it seems there might be a way, refer to my update in the original question, but will have to work on it again later to see if it will really work out – goodan Apr 02 '10 at 12:13
0

You can do this the advanced appearance settings in Windows itself. Note that this will affect (almost) all applications, not just your browsers. You might also have to close and re-open the browser.

  • In Windows 7: Control Panel > Appearance and Personalization > Personalization > Window Color > click 'advanced appearance settings', set Item drop box to 'Scrollbars" (or click on the scrollbar in the example picture), set Size spin control

  • In Vista: Personalization > Windows color and appearance > Open classic appearance properties > Advanced > Item > scrollbar then adjust the size.

  • In XP: Right click on your desktop and select Properties. In the window which appears, click the Appearance tab. Now click the Advanced button at the lower right. Drop down the Item menu and select Scrollbar. Using the up and down arrows, you can increase or decrease the scrollbar size.

Sam
  • 5,997
  • 5
  • 46
  • 66