Geek Answers Handbook

JScrollPane: shift the horizontal scrollbar to the left while dragging the jspDrag bit in Webkit

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

Please follow these steps:

  • Use Chrome (I use version 24.0.1312.57) or Safari (5.1.7) to go to the specified address.
  • Use the scroll bar to scroll to the image in the first three.
  • Click on this image.
  • Click on the "overzicht" link in the lower right corner.
  • This will bring you back to the overview by clicking on the image on the left (anchor tag functionality).
  • Take the drag and drop scroll bar and move it to the left.
  • The entire scroll bar disappears behind the logo on the left.
  • Refresh the page, the scroll bar behaves by itself.

CSS is included before javascript. I tried "autoReinitialise: true", which didn't make any difference. Now I use the following code:

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

which seems to help some (at least the scroll bar first appears in its place), but the drag problem still exists. Any help would be greatly appreciated.

Respectfully,

Vivienne

+6
source share
1 answer

Bypass

I played with your scrollbar, and the only thing I had was that positioning the scrollbar is weird, it seems to depend on the scroll of your jspPane . I can’t understand why.

In any case, if you can control the way jsscrollpane initializes the panel, it seems that if you move jspHorizontalBar to make it a direct child of tiascrollpanehor as follows:

 <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-driven. To fix this, add

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

I still can’t explain why this is so, but I hope this fixes this error for you (since I cannot change the structure of CSS and HTML before the page displays).

+1
source

More articles:


All Articles