jScrollPane 2.0 problema di altezza in cromo

Question

Sto utilizzando un div con il riquadro di scorrimento classe (altezza 100%) all'interno di un div posizionato in modo assoluto. Il div del riquadro di scorrimento contiene prima del testo, seguito da un'immagine e di nuovo seguito da un testo. L'altezza dell'immagine è impostata su 200 px. Il problema è! Se visualizzo lo scrollpane in Chrome (ultima versione) a volte riesco a scorrere il contenuto completo ea volte, dopo aver aggiornato il sito nel browser, no. Non significa che posso vedere solo una parte del secondo testo e non di più. Quindi l'altezza di scorrimento effettiva si riduce. Se aggiorno di nuovo, potrei essere in grado di vederlo di nuovo completo e così via. Cambia ogni volta che aggiorno il browser. Succede solo in Chrome.

Qualche idea su cosa posso fare per evitare questo comportamento? Grazie ...

UPDATE Ha davvero qualcosa a che fare con il modo in cui le importazioni (js e css) sono allineate nell'intestazione. Hai ragione, il css deve essere importato prima di jscrollPane js ma ciò significa anche che l'altezza dell'immagine deve provenire da uno dei fogli di stile css. Non è possibile definire l'altezza giusta all'interno del tag immagine nel markup. La mia soluzione era quella di creare una classe, per esempio img200 (che rappresenta un'altezza di 200 px) nel mio foglio di stile e che ha fatto il trucco. Quindi, ancora una volta cosa è necessario fare per farlo funzionare in Chrome o in un migliore webkit Browser in generale: Imposta una classe di altezza dell'immagine nel tuo foglio di stile per le immagini che vengono utilizzate all'interno di uno scrollPane. Includi il foglio di stile prima !!!!! la javascript per jScrollPane. Aggiungi la classe di altezza speciale a tutte le immagini che includi in una jScrollPane Che era. Grazie ancora per la tua risposta veloce. Molto bello

AGGIORNAMENTO FINALE DELLA SOLUZIONE !!!!!!!!!
Se si dispone di immagini all'interno di un'area jScrollPane, è necessario verificare quanto segue per poter visualizzare correttamente tutto nel browser webkit, come Chrome o Safari. Altrimenti causerà problemi di altezza e solo una parte dei tuoi contenuti sarà visibile.
Questo è ciò che devi fare:
Assicurarsi che la line up dei vostri fogli di stile CSS e il JScrollPane file javascript è corretto. Il file jScrollPane javascript deve seguire i tuoi fogli di stile css e non viceversa! Inoltre, devi aggiungere un'altezza a ciascuna immagine inclusa nell'area jScrollPane. Puoi farlo creando una classe css o aggiungendo la dimensione come attributo direttamente a img nel markup html.
Se lo tieni a mente, farà il trucco.

Answer 1

Hai provato anche in Safari? Questo suona come un problema che si verifica in Webkit quando il javascript è incluso prima del CSS nella testa del documento: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

Se questo non è la causa allora potrebbe essere qualcosa legato al fatto che si dispone di un immagine nel tuo scorrere. È necessario includere la larghezza e l'altezza dell'immagine (vedere http://jscrollpane.kelvinluck.com/image2.html) o autoReinitializzare il riquadro (vedere http://jscrollpane.kelvinluck.com/image.html).

Speranza che aiuta :)

Answer 2

Se si dispone di un'immagine all'interno della vostra zona JScrollPane div, è sufficiente definire la sua larghezza e altezza.

<div class="scroll-pane"> 
<img src="image.jpg" alt="" width="300" height="50" /> 
</div> 

Questo risolverà il bug del webkit di jScrollPane.Oh, e naturalmente caricare il CSS prima di JS

Answer 3

dare la chiamata a JScrollPane in $(window).load invece di $(document).ready

Answer 4

Ho anche scoperto che l'aggiunta di una regola CSS per .scroll-pane per la line-height risolve i miei problemi di altezza.

Ad esempio:

.scroll-pane {line-height: 1;} 

o qualunque linea di altezza sul suo sito web può avere bisogno.

Ho anche scoperto che se si utilizza @ font-face, jscrollpane può eseguire il calcolo dell'altezza prima che il carattere sia stato caricato correttamente e quindi calcolare male. Ho risolto il problema aggiungendo l'impostazione:

autoReinitialise: true 

Viene eseguito su un timer, tuttavia, utilizzare con parsimonia.