4

I have a div that is overflow-y: hidden; overflow-x: auto; and rendering a scrollbar exactly the way I want. I have all of the scrolling functionality and everything I want perfect already. Now, all I want to do is replace the default browser scrollbar with a custom one.

It needs to work in PC IE7+ and Firefox and Mac Safari so it'll need to be JavaScript or jQuery. I've already tried four different plugins that I've found, but none of them worked either because of the version of jQuery (1.6.2), didn't work in all the browsers necessary, or wouldn't work for a horizontal scrollbar, etc. The ones I tried were jQuery UI's slider, jQuery Custom Scrollbar, Tiny Scrollbar and jScrollPane.

I'm hoping there's a simple plugin out there, but I can't seem to find it.

3
  • What wasn't working with jScrollPane? I've used jScrollPane with it working in those browsers in the past. I'm curious as to what wasn't working and in which browsers.
    – Keefer
    Commented Nov 8, 2011 at 17:00
  • Could you provide an example of something that doesn't work? The plugins you've suggested are all established and functional (i.e. not beta) and ought to do the job :(
    – Kato
    Commented Nov 8, 2011 at 17:02
  • I went for jScrollPage first since it has worked well for me in the past. But unless I'm missing something, it only works for vertical scrollbars. Commented Nov 8, 2011 at 22:43

1 Answer 1

5

I've used Flexcroll several times and it works great. Good browser support and it handles touch events for mobile devices as well.

The appearance of the scrollbars is handled with a sprite that's pretty easy to customize. It's 17.5KB which comes out to about 8KB when it's compressed so it's nice not having the overhead of a whole library when this is all you want.

http://www.hesido.com/web.php?page=customscrollbar

1
  • Beautiful, thank you. It certainly adds a ton of markup, but it works, and that's all I care about right now. Commented Nov 8, 2011 at 17:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.