jScrollPane: horizontal scrollbar shifts left when dragging the jspDrag bit in Webkit

Question

I've got a Webkit specific problem when using the horizontal scrollbar in combination with an anchor tag. An example of the problem is shown here: http://www.splinterarchitecten.nl/wonen-combinatie/

Please take the following steps:

1. Use Chrome (I'm using version 24.0.1312.57) or Safari (5.1.7) to go to the given address.
2. Use the scrollbar to scroll to an image beyond the first three.
3. Click on that image.
4. Click on the 'overzicht' link in the bottom right corner.
5. This returns you to the overview, with the clicked image on the left (anchor tag functionality).
6. Grab the scrollbar drag bit and move it to the left.
7. The whole scrollbar dissapears behind the logo on the left.
8. Refresh the page, the scrollbar behaves itself.

The CSS is included before the javascript. I've tried 'autoReinitialise: true', which made no difference. I now use the following code:

if ( window.location.hash ) {
    api.scrollToElement( $j( window.location.hash ), 1 );
}

which seems to help some (at least the scrollbar is shown in its proper place initially), but the problem with the dragging is still there. Any help would be greatly appreciated.

Kind regards,

Vivienne

Answer 1

Workaround

I've been playing with your scrollbar, and the only thing I got is that the positioning of the scrollbar weirdly seems to depends on the scroll of your jspPane. Cannot figure why.

Anyway, if you can control the way jsscrollpane initialize the pane, it seems that if you move the jspHorizontalBar to make it a direct child of tiascrollpanehor like that :

<div id="tiascrollpanehor" class="scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 525px; " tabindex="0"> 
    <div class="jspHorizontalBar">
    <div class="jspContainer" style="width: 525px; height: 439px; ">
    ....

It positions itself well but is not user controllable. To fix that, add

.jspHorizontalBar{
    ...
    z-index:2;
}

I still can't explain why it's behaving like that, but I hope this will fix that bug for you (as I can't modify CSS and HTML structure before page rendering).