jScrollPane: la barra di scorrimento orizzontale si sposta a sinistra durante il trascinamento del bit jspDrag in Webkit

Question

Ho un problema specifico del Webkit quando utilizzo la barra di scorrimento orizzontale in combinazione con un tag di ancoraggio. Un esempio del problema è mostrata qui: http://www.splinterarchitecten.nl/wonen-combinatie/

Si prega di seguire i seguenti passi:

1. utilizzare Chrome (sto usando la versione 24.0.1312.57) o Safari (5.1.7) per andare alla data indirizzo.
2. Utilizzare la barra di scorrimento per scorrere fino a un'immagine oltre i primi tre.
3. Fare clic sull'immagine.
4. Fare clic sul collegamento "overzicht" nell'angolo in basso a destra.
5. Questo riporta alla panoramica, con l'immagine selezionata a sinistra (funzionalità di tag di ancoraggio).
6. Afferra il bit di trascinamento della barra di scorrimento e spostalo a sinistra.
7. L'intera barra di scorrimento scompare dietro il logo sulla sinistra.
8. Aggiorna la pagina, la barra di scorrimento si comporta da sola.

Il CSS è incluso prima del javascript. Ho provato 'autoReinitialise: true', che non ha fatto differenza. Io uso il seguente codice:

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

che sembra aiutare alcuni (almeno la barra di scorrimento è mostrato al suo posto inizialmente), ma il problema con il trascinamento è ancora lì. Qualsiasi aiuto sarebbe molto apprezzato.

Cordiali saluti,

Vivienne

Answer 1

Soluzione

Ho giocato con la barra di scorrimento, e l'unica cosa che ho ottenuto è che il posizionamento della barra di scorrimento sembra stranamente ad dipende la pergamena del tuo jspPane. Non riesco a capire perché.

In ogni caso, se è possibile controllare il modo in cui jsscrollpane inizializzare il riquadro, sembra che se si sposta il jspHorizontalBar per renderlo un figlio diretto di tiascrollpanehor così:

<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; "> 
    .... 

si posiziona bene ma non è controllabile dall'utente. Per rimediare, aggiungere

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

io ancora non riesco a spiegare il motivo per cui sta comportando così, ma spero che questo risolverà il bug per voi (come non posso modificare i CSS e la struttura HTML prima il rendering della pagina).