Community Central

Admin Forum:Styling cross-browser scrollbar


Admin Forum:Styling cross-browser scrollbar

19,798pages on
this wiki
Add New Page
Talk0 Share

This Forum has been archived

Forums: Admin Central Index Technical Help Styling cross-browser scrollbar
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

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>  
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)