Scroll bar styling

Is anyone using any JavaScript plugin that allows CSS styling of scroll bars in browsers? Hopefully it works across different browsers :-) We are primarily looking at changing the colors.

Find more posts tagged with

refinitiv-internal

javascript-browser

Accepted answers

All comments

Dwayne Driskill

Here's a jQuery plugin:
http://jscrollpane.kelvinluck.com/

Vishnu Gandhi

There are a couple of options -

1. You can use firebug to play with css in runtime. Chrome developer tools also provides with such facility.

2. There are a few plugins available for firefox the we can use sometimes to look at the existing css styles, but we cannot edit the css styles using this plugin -
https://addons.mozilla.org/en-us/firefox/addon/css-viewer/

[1]: http://techoverflow.int.thomsonreuters.com/upfiles/Firebug1.jpg
[2]: http://techoverflow.int.thomsonreuters.com/upfiles/Firebug2_1.jpg

amo

There is some great information found here: [http://stackoverflow.com/a/14150577/276648][1]

A key note to that post is this statement:

> "Currently, there exists no
> cross-browser scroll bar CSS styling
> definitions."

With that in bind, one would most likely use JavaScript to do it. There are a few issues that arise when manipulating the scroll bars with JavaScript that need to be considered though. The way most (if not all) of the 3rd party plugins work is that they hide the current scroll bars and position a DIV over that area and then delegate the scrolling events. With that in mind, the considerations are:

1. How do you react to the area being resized? **Answer**: `$(window).on('resize', myjs.myFunction);` **Just don't forget to unbind that event to! ** `$(window).unbind('resize', myjs.myFunction);`
2. When the area is removed from the DOM and re-rendered, how do you re-initialize the plugin to apply the scroll bars again. **Answer**: "...results may vary"

Now in a perfect world your HTML and CSS is 100% consistent across all pages. Then you know exactly what class or element has the scroll area and you can easily do the magic. However, in the *Real World*, you have to figure out what area will contain the scroll areas and decorate "those" to make it work.

In the end, anything is possible. But, how much time and energy should be spent fixing the bugs that "WILL" come. :-)

[1]: http://stackoverflow.com/a/14150577/276648

Arun Narayanan

Have you been using it?

Dwayne Driskill

I've played around with it, but I haven't used it for a project.

Chris Dhanaraj

This is pretty much the only one that's actively maintained in any scenario - there's another you can mess with (https://github.com/akmjenkins/jquery-scroll) but.. yeah.

Pasit R

I have used this jquey custom scrollbar https://github.com/malihu/malihu-custom-scrollbar-plugin ([see demo here][1]) for Eikon Administration project.

it's responsive, worked well on touch screen, cross-browsers compatible, tried and tested and already go live for our production.
![alt text][2]

[1]: http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html "see demo here"
[2]: http://techoverflow.int.thomsonreuters.com/upfiles/capture-20140516-140856.png

Arun Narayanan

Thanks, we will take a look at this. Were you able to use it as is, or did you have to take care of some quirks?

EXPLORE OUR SITES