Webkit scrollbar

Hello all. After some search, I found the most adequate way to customize a scroll bar. I only want to have this custom scroll bar for 1 div I have and not the entire site. I've been trying to get that to work, but no matter what I do, the custom scroll bar always appears on both the div and the browser scroll on the right. Any ideas on how I could get this to work for the specific div class?

This is the webkit I'm using :


::-webkit-scrollbar-track-piece {
background-color:#fff;
-webkit-border-radius:0;
}
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb {
height:50px;
background-color:#f26522;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover {
height:50px;
background-color:#f26522;
-webkit-border-radius:4px;
}

There is no way. Customizing the scrollbar only works in IE and will change all scrollbars you see on that page.

One important thing you must know about a colored scrollbar is that it does not do not work in Gecko-based browsers (Firefox, Netscape Navigator, Mozilla): It is an Internet Explorer's only property. It is not a standard property or a proprietary property. According to W3C, these properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")

There is no way. Customizing the scrollbar only works in IE and will change all scrollbars you see on that page.

Thats a shame. It works fine in chrome. I guess I'll resort to using a jquery script