Move/reposition scrollbar when using jScrollPane

I've had a look for the answer but with no luck so far.

At the moment the scrollbar and arrows 开发者_JS百科are postioned inside the same div as the scrollable content - which in most cases makes sense. I want to know if there is a way to place the scrollbar and arrows outside of this div in a different location in the html page? Is there a way to specify the place they should go?

Example:

<div id="content">
   Lorem ipsum....
</div>

Gets turned into:

<div id="content">
   <div class="scrollpane">
       Lorem ipsum....
   </div>
   <div class="scroll-bar">
       ### scroll bar and arrows here ###
   </div>
</div>

But I want to get this:

<div id="content">
   <div class="scrollpane">
       Lorem ipsum....
   </div>
</div>
[other html other html and content other html]
<div id="scrollbar-here">
 ### scroll bar and arrows here ###
</div>

Any help much appreciated, or a link to the answer that I've missed would be equally helpful. I'm using jquery1.4.3 and jScrollPane - v2.0.0beta6

I just answered this question where you had posed it to the google group: http://groups.google.com/group/jscrollpane/browse_thread/thread/ff2e10b8d784fed6

Here is the answer for other searchers:

Unfortunately that isn't currently supported. There are a few of ways you could attempt to achieve it:

1. Use absolute positioning on the jspVerticalBar and/or jspHorizontalBar and try to move them so that they appear elsewhere in your document.
2. If you are only interested in the arrows then you could easily hook some different buttons up to the API so that they called scrollBy to do the scrolling [see http://jscrollpane.kelvinluck.com/scroll_to.html ]. Additionally you can hook up to the jsp-scroll-x/y events to mark your homemade arrows as disabled when relevant [see http://jscrollpane.kelvinluck.com/events.html ]. And you would use CSS to hide the "real" scroll bar and arrows.
3. You could try using javascript to move the elements (e.g. something like $('#myDiv').append($('.jspVerticalBar')); ) - no guarantees this won't have some strange side effects though!

Hope it gives you some ideas. If you want to add this as a feature request on the github issues list then I'll try to look at it in the future (it'll won't be soon though - I'm really busy with client work at the moment).

For some reason I can't comment on vitch's answer but I just wanted to document for anyone coming to this page that option 3 and some simple CSS adjustments (the main one being switching position:absolute to position:relative on .jspContainer) worked for me.