Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get a custom scroll in firefox and IE?

Tags:

css

I am using a custom scroll which works fine in chrome...but it does not work in Firefox or IE9.

This is the CSS:

    ::-webkit-scrollbar {
    width: 7px;
    height: 1px;
}

::-webkit-scrollbar-thumb    
{
    height: 1em;
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(250, 250, 250)));  
    -webkit-border-radius: 5px;  
} 

::-webkit-scrollbar-button:end:increment {
   background:url(../images/down.png) center no-repeat;
}

::-webkit-scrollbar-button:start:decrement
{
   background:url(../images/up.png) center no-repeat;
}
like image 768
Beginner Avatar asked Feb 17 '12 17:02

Beginner


People also ask

Does Firefox support custom scrollbars?

Many users have asked me to include the ability to set a custom scrollbar width, which is currently possible on Chromium-based browsers. I'd LOVE to be able to do this, but currently the standard that Firefox is using does not support that functionality.

How do I change the scrollbar in Firefox?

Nevertheless, you can still change that browser's scrollbar style to different alternatives within the browser's about:config (Advanced Preferences) menu. This is how you can customize Firefox's scrollbar style by changing a hidden flag on Firefox's Advanced Preferences tab.

How do I make the scrollbar show in all browsers?

scrollbar is not a CSS standard. In Chrome or Safari (WebKit) you can use the extension prefixed by -webkit- Read more here. FireFox doesn't support scrollbar styling. So probably you can support this effect in IE and WebKit browsers only, or use JavaScript libraries as Iwo Kucharski said.

Can I use ::- webkit scrollbar track?

::-webkit-scrollbar. Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


1 Answers

That is a proprietary webkit property. There is no equivalent for FF or IE.

You can, however, do what you're looking for with jQuery.

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Edit: Uhhh.. there literally is no Firefox equivalent and the person asking the question literally must either use a javascript solution, or no solution at all. Downvotes won't change that.

like image 89
Chris Sobolewski Avatar answered Oct 03 '22 01:10

Chris Sobolewski