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.
- Post some code or make a fiddleRicha– Richa2014-05-07 09:24:56 +00:00Commented May 7, 2014 at 9:24
- 1What scrollbar? The native one? Don't think you can change it.putvande– putvande2014-05-07 09:26:01 +00:00Commented May 7, 2014 at 9: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– jayasiinput2014-05-07 09:46:17 +00:00Commented May 7, 2014 at 9:46
- For that you need to use some Javascript. IE doesn't have any native code like webkit based browsers have.bulanmaster– bulanmaster2014-05-07 09:56:25 +00:00Commented May 7, 2014 at 9:56
- can u post some code pleasejayasiinput– jayasiinput2014-05-07 09:57:29 +00:00Commented May 7, 2014 at 9:57
Add a comment |
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
1 Comment
jayasiinput
Thank you, will try it and get back with the result
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.
3 Comments
kofifus
does not answer the question in any way
Akshay
-ms-overflow-style: -ms-autohiding-scrollbar; helped me
Behnam Esmaili
Dear IE!! Why you don't just DIE?