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

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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

poor cross-browser compatibility
lag
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.