0

I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.

As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!

Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?

Alternatively - is there a way I can attach something to the css for when the browser is firefox!?

Thanks JD

Improve this question
2

5 Answers 5

Reset to default
1

Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.

Improve this answer
0

I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.

You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.

Improve this answer
0
0

Here are some custom scrollbars you can use: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

One off these solutions should work. BTW i use JScrollpane and it works like a charm for me

Improve this answer
1
  • Hi Luuk - thanks for the response - have run through these examples and tried them out but cannot seem to get them working without interfering with my current javascript! very frustrating.....
    – JD2011
    Commented Aug 24, 2011 at 23:46
0

I went through all of the suggestions above and was disappointed by either of the following issues:

  1. poor cross-browser compatibility
  2. lag
  3. a lot of redundant code/ dependencies (jQuery UI)

Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.

My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.

Improve this answer
1
  • 1
    Both of the links are dead now. Consider updating your answer.
    – lolbas
    Commented Feb 27, 2018 at 14:41
0

Just found this, without jQuery, if anyone is interested:

http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/

Improve this answer

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