JavaScript scrollbar recommendations [closed]

Question

I'm really disappointed that I can't customize Firefox's scrollbar, but now I am looking for alternatives. Listed below are the best that I've found, but I figured I should ask for opinions and perhaps links to even better ones!

http://manos.malihu.gr/jquery-custom-content-scroller (looks great, supports content changes)

http://baijs.nl/tinyscrollbar/ (looks decent, supports content changes, 100 lines of code, etc.)

http://johnford.is/examples/script.aculo.us/index.html (image examples look good, mouse wheel support available)

Are these the best, or does anyone have a recommendation?

Chianti

Answer 1

My recommendation: stick with the scrollbars provided by the browser. They may not look exactly how you want, but they will work better than any JavaScript replacement, will be consistent with scrollbars in other applications in the user's OS, and will work when JavaScript is turned off. You also avoid effort now (easier development) and later (no maintenance).

Emeraldemerge

I'd like to do it without javascript, but when I put LCD-type graphics for the content div/menu ( like this s3.envato.com/files/384147.jpg but a square instead of an oval ) onto my new skin/theme ( solarcoordinates.com/demo/newthemedemo.png ), then the standard scrollbar is probably going to look really, really out of place. – Chianti

+10, if I could. I really hate it when a website provides custom scrollbars. Look at 't Hoogt's website: I like their movies, but every time I have to look where the scrollbar is. Don't Make Me Think! – Robichaud

@Marcel Sorry, but that background is a disaster. Nothing wrong with the guy putting himself and his baby on the background, but it needs to be subtle. IMO, the high, confusing color contrast will give pretty much anyone a headache, but the tiny scrollbar on the left is fine. – Chianti

@Michael: I admit that the default scrollbars will look out of place. The cost of replacing scrollbars is high though, for both the developer and the user, and you need to be sure you know all the issues before doing so (look carefully into accessibility and usability). If you do decide to implement JavaScript scrollbars, just make sure whatever you use reverts to normal browser scrollbars when JS is turned off. – Emeraldemerge

@Tim Yep, the site is not currently working if JS is disabled, but it'll get there. If JS is enabled, the body, which is empty by default, is fetched with AJAX. Once I get done with everything, a non-JS version will be enclosed in a noscript tag within the body. – Chianti

@Michael: That's actually a movie poster in the common style of the film theater; it changes every month. But I admit it is quite a noisy site. – Robichaud

I've downvoted. I disagree. Take Gmail for instance. They have a custom scrollbar, it works well and looks way better than the default one IMO. I think there should however be a fallback to the browsers scrollbar in case the user doesn't use Javascript. – Deceased

@conradk: Fair enough, thanks for explaining. I imagine that there are better options available now than when I wrote this but my overall view hasn't really changed. – Emeraldemerge

This doesn't answer the question. Besides, several nice and slick website use js scrollbars. – Ringtailed

@SamuelRossille: Well, I'd argue that the question asks for recommendations, which is what I gave, but I do see your point. I stand by my advice though, even more so now with touch devices so prevalent: you need an extremely good reason to use JS scrollbars rather than native scrollbars, and an extremely good implementation. Thanks for taking the time to explain your downvote. – Emeraldemerge

Answer 2

The ones in the first link you gave are very nice and useful.

As far as the scroll is concerned, there is not much to do if you are not a Picasso in my opinion. I say go with the first link.

Unspotted

This should be a comment, not an answer. – Bituminize

Answer 3

I like to use Tiny Scrollbar for the minimalist design, and for the more custom use cases I use jQuery custom content scroller

Hypogene

Answer 4

I recommend this jQuery custom scrollbar plugin:

https://github.com/mzubala/jquery-custom-scrollbar

Features include:

• Vertical and horizontal scrollbars you can style your own way
• Scrolling by mouse dragging, mouse wheel, keyboard – just as you would with native browser -scrollbar
• Touch scrolling on mobile devices (Android, iPhone and iPad)
• A couple of predefined skins showing you how to style scrollbars
• Simple API that lets you scroll programmatically and be notified about scroll events

Twobit