Admin Forum:Styling cross-browser scrollbar

Forums: Admin Central Index → Technical Help → Styling cross-browser scrollbar

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4360 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I modified scrollbar look using -webkit-scrollbar script. But this is reserved for webkit browsers only. Thinking that most of people use IE for surfing, this settings would be rarely valid for my visitors. Isn't there any way to make it cross-browser compatible? I found some jQuery custom scrollbars on the internet but they contains too many unneeded functions that I'm afraid of installing them to my wiki. I'm wondering if there is anything simpler? Cafeinlove ^msg 2012-05-13, 6:30 am(UTC+9)

This is only for scrollboxes inside an article. For now I'm handeling it by class attribute (.scrollbox::-webkit-scrollbar etc.) I didn't mean to change the style in general of the scrollbars. (I'm saying this because I could sound not respecting any web conventions.) Cafeinlove ^msg 2012-05-13, 7:15 am(UTC+9)

Maybe try -o-scrollbar for Opera browsers, -moz-scrollbar for Firefox, -ms-scrollbar for IE9+? — subtank ^(7alk) 22:08, May 12, 2012 (UTC)

I will go try that solution to see. Thanks for your advice. Cafeinlove ^msg 2012-05-13, 7:15 am(UTC+9)

I couldn't make it working, there's no change on IE9 and FF12.

.scrollbox::-webkit-scrollbar, .scrollbox::-moz-scrollbar, .scrollbox::-ms-scrollbar { width:12px; }
.scrollbox::-webkit-scrollbar-track, .scrollbox::-moz-scrollbar-track, .scrollbox::-ms-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
.scrollbox::-webkit-scrollbar-thumb, .scrollbox::-moz-scrollbar-thumb, .scrollbox::-ms-scrollbar-thumb { background: rgba(246,149,36,0.8); }

Cafeinlove ^msg 2012-05-13, 7:35 am(UTC+9)

Yea... by the looks of it, it didn't work. I presume you've looked at this page when trying to figure out how to do it. Apparently, this old page shows that Firefox doesn't allow customisation and that the only way to circumvent this is through Javascript (or JQuery if you know how to do it). This page shows how to make it work in IE8 and IE9. Sorry if this is not that helpful. :/ — subtank ^(7alk) 23:36, May 12, 2012 (UTC)

Thank you for linking documentations. Now I'm planning to integrate this. Basically I only need to copy the following codes

var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');

<div id="scrollbar_container">  
    <div id="scrollbar_track"><div id="scrollbar_handle"></div></div>  
    <div id="scrollbar_content">...</div>  
</div>

and then the CSS. I'm not sure yet if this works on my site, but I'll try. Cafeinlove ^msg 2012-05-13, 8:49 am(UTC+9)

Admin Forum:Styling cross-browser scrollbar

Fan Feed