Custom scroll bar Internet Explorer issue

Question

I have a custom scroll bar accomplished by the code as shown here:

::selection {
    background: #333;
    color: #FFF;
}
::-webkit-scrollbar {
    width: 9px;
}
::-webkit-scrollbar-track {
    background:#eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;
}
::-webkit-scrollbar-thumb {
    background:#999;
    border: thin solid gray;
}

It works fine on Chrome, Firefox... but Internet Explorer it does not work What should I add?

Answer 1

The CSS specified will only apply a custom scrollbar on a webkit browser such as Chrome and Safari. Internet Explorer only supports a limited amount of scrollbar customisation. See the MSDN reference and this IE scrollbar CSS generator.

Also, Firefox doesn't support custom scrollbars (bug report), so I'm not sure how your CSS is working in Firefox - it isn't for me.

If you want, you can use JavaScript-based jScrollPane to implement custom scrollbars in all browsers, but be warned, many people hate the user experience on JavaScript scrollbars, myself included.