CSS scrollbar style cross browser

Question

How can I define a CSS scrollbar style cross browser? I tested this code, it only works in IE and opera, but failed in Chrome, Safari and Firefox.

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>

For WebKit browsers (Chrome/Safari), you can use this: http://stackoverflow.com/questions/7713599/styling-an-inner-scrollbar-like-the-twitter-conversation-interface/7713784#7713784 — thirtydot, Oct 11 '11 at 12:00
@graphicdivine, that would only be the case if they're changing the scrollbar for the overall body. There are plenty of other scrollbars that could be modified (within the webpage) where it has nothing to do with the browser chrome. — Dan, Jun 26 '12 at 14:31
This link shows you have to do it on Webkit browsers: http://css-tricks.com/custom-scrollbars-in-webkit/ — user1108509, Jul 16 '12 at 20:33

score 151 · Answer 1 · edited May 23 '17 at 12:26

151

Webkit's support for scrollbars is quite sophisticated. This CSS gives a very minimal scrollbar, with a light grey track and a darker thumb:

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

This answer is a fantastic source of additional information.

edited May 23 '17 at 12:26

Community

1
1

answered Jun 04 '13 at 22:25

Drew Noakes

266,361
143
616
705

6

this however does not work in IE – user2886091 Mar 13 '14 at 10:11
1

See also: http://css-tricks.com/custom-scrollbars-in-webkit/ – Drew Noakes May 19 '14 at 17:17
1

this will work on chrome. what about firefox and IE? – SHEKHAR SHETE Jan 09 '15 at 08:38
@SHEKHARSHETE, yes this approach is only for WebKit. You should reference other answers if you need to support other browsers, perhaps in tandem with these vendor-prefixed CSS selectors. – Drew Noakes Jan 09 '15 at 11:01
don't work on FF – bksi Feb 05 '18 at 21:05

score 115 · Accepted Answer · answered Oct 11 '11 at 11:58

115

Scrollbar CSS styles are an oddity invented by Microsoft developers. They are not part of the W3C standard for CSS and therefore most browsers just ignore them.

answered Oct 11 '11 at 11:58

Till Helge

8,823
2
37
54

107

Now also supported in Webkit though. And I think Opera supports them as well. So in fact, as of 2012, it seems 70% of the browser market share *does* support it (it being the styling of scrollbars, they do still use different syntax per browser to get the styling done sadly). – Stijn de Witt Jul 31 '12 at 13:43
9

And now, 2013, Opera is moving to Webkit as well. Awesome! – Jimbo Feb 15 '13 at 16:24
28

See http://stackoverflow.com/a/14150577/276648 for a more complete answer with alternatives. – user276648 Jul 10 '13 at 07:45
@jmendeth Well, I did not take the time to test it all myself, but according to [this page](http://codemug.com/html/custom-scrollbars-using-css/) it should work for IE, Chrome, Firefox. And according to [this forum thread](http://my.opera.com/community/forums/topic.dml?id=199326&t=1379593894) the IE style rules also work(ed?) in Opera, but only on the main page scrollbars. Not on those for textarea or div etc... – Stijn de Witt Sep 19 '13 at 12:41
3

Everyone would like it. The single smart idea coming from the IE era ? – Ben Jan 15 '14 at 16:36
For fallback, one could use something like http://jscrollpane.kelvinluck.com/ – polkovnikov.ph Jan 30 '14 at 01:10
@Ben - XMLHttpRequest? First appeared in IE 5, 1999 and was pretty revolutionary, adopted by Mozilla almost immediately. – Daniel Earwicker Jan 26 '17 at 16:52

score 32 · Answer 3 · edited Jun 27 '13 at 22:29

32

jScrollPane is a good solution to cross browser scrollbars and degrades nicely.

edited Jun 27 '13 at 22:29

ktutnik

5,242
1
24
33

answered Oct 11 '11 at 12:02

Hussein

40,778
25
110
143

Does that only work on vertical scrollbars? – paradroid Oct 08 '12 at 07:18
2

@paradroidΨ it also works horizontally scrolling content. – Rebecca Dec 03 '12 at 14:40
3

It does not degrade nicely. There are numerous situations where it doesn't create scrollbars (I have on in Firefox21). – edA-qa mort-ora-y Jun 11 '13 at 11:24

score 13 · Answer 4 · edited Sep 29 '19 at 11:33

nanoScrollerJS is simply to use. I always use them...

Browser compatibility:

IE7+
Firefox 3+
Chrome
Safari 4+
Opera 11.60+

Mobile browsers support:

iOS 5+ (iPhone, iPad and iPod Touch)
iOS 4 (with a polyfill)
Android Firefox
Android 2.2/2.3 native browser (with a polyfill)
Android Opera 11.6 (with a polyfill)

Code example from the Documentation,

Markup - The following type of markup structure is needed to make the plugin work.

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

score 1 · Answer 5 · answered Jan 06 '13 at 15:06

1

As of IE6 I believe you cannot customize the scroll bar using those properties. The Chris Coyier article linked to above goes into nice detail about the options for webkit proprietary css for customizing the scroll bar.

If you really want a cross browser solution that you can fully customize you're going to have to use some JS. Here is a link to a nice plugin for it called FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

answered Jan 06 '13 at 15:06

DMTintner

13,235
4
32
31

5

Were there really people in 2013 still coding to IE6? – user2867288 May 02 '15 at 04:54
@user2867288 - Yes...yes there were. I actually did freelance work for a small web agency that would farm some of their work to me, and that demanded I make all things IE6 capable. I finally dropped the entire agency as a client around that time because it was getting so ridiculous. Lost a decent amount of income...but kept my sanity. I would not doubt that they still require it to this day in 2016. – Jimbo Jonny Feb 23 '16 at 16:59
This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether. – AStopher May 23 '17 at 15:12

Yousef Altaf · Answer 6 · 2017-05-24T10:53:56.907

try this it's very easy to use and tested on IE and Safari and FF and worked fine and beside no need for many div around it just add id and it will work fine, after you link you Js and Css files. FaceScroll Custom scrollbar

hope it help's

Edit Step 1: Add the below script to the section of your page:

<link href="general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Step 2: Then in the BODY of your page, add the below sample HTML block to your page.

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether. — AStopher, May 23 '17 at 15:12

CSS scrollbar style cross browser

6 Answers6

Linked

Related