jScrollPane - cross browser styleable scrollbars with jQuery and CSS

This page discusses known issues with jScrollPane and provides suggested workarounds for these issues.

In Opera the main window scrollbar appears when a jScrollPane contains lots of content

As far as I can tell this is due to a bug in Opera. The workaround is to include something absolutely positioned as a parent of your jScrollPane. See this bug report (from the previous version of jScrollPane) for discussion of this problem.

In Webkit browsers CSS must be included before Javascript

For jScrollPane to work correctly in Webkit based browsers (e.g. Safari, Chrome, iOS and Android) then the CSS must be included above your javascript includes. Otherwise jScrollPane can't correctly measure the size of the item you are applying jScrollPane to. See all of the example or theme pages for a reference as to the correct ordering of items in your <head>.

Width specified directly on an element you apply jScrollPane to will be overwritten

If you apply a width to an element (e.g. via jQuery's width method or via a style attribute) then this width will be overwritten when you reinitialise the scrollpane. Unforunately I can't find a way to avoid this and still support percentage based widths for elements/

As a workaround you can specify the width via a CSS class refering to a stylesheet rule. If you can't do this (e.g. you calculate the width dynamically) you will have to wrap your element in an additional div and apply the width to that element while setting the width of your element to 100% via the stylesheet.