CODEWITHSUNDEEP
javascriptcssscrollbarjscrollpane
JD2011
JD2011

Reputation: 223

Custom scrollbar

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

Upvotes: 0

Views: 7922

Answers (5)

coco puffs
coco puffs

Reputation: 1090

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.

Upvotes: 1

Rolf
Rolf

Reputation: 5743

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

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

Upvotes: 0

Gajus
Gajus

Reputation: 73808

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.

Upvotes: 0

Luuk
Luuk

Reputation: 1999

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

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

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.

Upvotes: 0

Related Questions