7

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.

Kara
  • 6,115
  • 16
  • 50
  • 57
jayasiinput
  • 91
  • 1
  • 1
  • 2
  • Post some code or make a fiddle – Richa May 07 '14 at 09:24
  • 1
    What scrollbar? The native one? Don't think you can change it. – putvande May 07 '14 at 09:26
  • Thank you for your replies, i cant find any code, but in chrome i can do it using the follwing ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } – jayasiinput May 07 '14 at 09:46
  • For that you need to use some Javascript. IE doesn't have any native code like webkit based browsers have. – bulanmaster May 07 '14 at 09:56
  • can u post some code please – jayasiinput May 07 '14 at 09:57

2 Answers2

4

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

Gromo
  • 1,609
  • 1
  • 13
  • 14
4

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.
Frank
  • 1,056
  • 3
  • 17
  • 38