Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

62 lines (59 sloc) 3.07 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>jScrollPane - known issues</title>
<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src=""></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#examples">Examples</a></li>
<li><a href="index.html#themes">Themes</a></li>
<li><a href="index.html#usage">How to use</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="known_issues.html">Known issues</a></li>
<li><a href="index.html#support">Support</a></li>
<li><a href="index.html#download">Download</a></li>
<div id="container">
<h1>jScrollPane - cross browser styleable scrollbars with jQuery and CSS</h1>
This page discusses known issues with jScrollPane and provides suggested workarounds for these issues.
<h2 id="opera-scrollbar">In Opera the main window scrollbar appears when a jScrollPane contains lots of content</h2>
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 <a href="">
this bug report</a> (from the previous version of jScrollPane) for discussion of this problem.
<h2 id="webkit-css-first">In Webkit browsers CSS must be included before Javascript</h2>
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 <a href="index.html#examples">
example</a> or <a href="index.html#themes">theme</a> pages for a reference as to the correct ordering
of items in your &lt;head&gt;.
<h2 id="specified-width">Width specified directly on an element you apply jScrollPane to will be overwritten</h2>
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.
Jump to Line
Something went wrong with that request. Please try again.