How to Adjust/Change Scrollbar Width

问题:

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.

回答1:

::-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*/

回答2:

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.

回答3:

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.