Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

resize scroll bar width in internet explorer

I am new to stackoverflow.

I need to resize the scrollbar width and height.

I tried in many ways, I can get only changing its color but not resizing.

like image 578
jayasiinput Avatar asked May 07 '14 09:05

jayasiinput


2 Answers

There is no CSS way to change style of browser scrollbars, except webkit-based browsers (Google Chrome, Safari, new Opera). So to make custom scrollbar you have to emulate it with js. There are lots of jQuery plugins - some better, some worse, some matches your needs, some - not. Try these: jQuery Scrollbar, jScrollPane, Malihu Custom Scrollbar

like image 128
Gromo Avatar answered Sep 25 '22 04:09

Gromo


Although this is a fairly old question. MSIE has a feature which allow the scrollbars to hide when not being used. This is very similiar to the scrollbars OSX lion introduced. Plain CSS , NO JS.

  body {

  scrollbar-base-color: #222;
  scrollbar-3dlight-color: #222;
  scrollbar-highlight-color: #222;
  scrollbar-track-color: #3e3e42;
  scrollbar-arrow-color: #111;
  scrollbar-shadow-color: #222;
  scrollbar-dark-shadow-color: #222; 
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

The example above shows adding custom scrollbars to MSIE and then having them hidden when out of focus with the -ms-autohiding-scrollbar property.

  • Note - you can have different scrollbar behaviors for different parts of your site by targeting and #id or .class instead of body.
like image 29
Frank Avatar answered Sep 21 '22 04:09

Frank