jScrollPane problema de altura 2.0 en cromo

Question

Estoy usando un div con panel de desplazamiento de clase (altura 100%) dentro de un div posicionado absoluto. El div del panel de desplazamiento contiene algo de texto primero, seguido de una imagen y luego algo de texto. La altura de la imagen está establecida en 200px. ¡El problema es! Si veo el panel de desplazamiento en Chrome (última versión), a veces puedo desplazar el contenido completo y, a veces, después de actualizar el sitio en el navegador, no. No significa que solo puedo ver una parte del segundo texto y no más. Entonces, la altura real de desplazamiento se reduce. Si vuelvo a actualizar, es posible que pueda ver todo nuevamente, y así sucesivamente. Cambia cada vez que actualizo el navegador. Solo sucede en Chrome.

¿Alguna idea de lo que puedo hacer para evitar ese comportamiento? Gracias .....

ACTUALIZACIÓN Realmente tiene algo que ver con cómo las importaciones (js y css) se alinean en el encabezado. Tienes razón, el CSS debe importarse antes del jscrollPane js, pero eso también significa que la altura de la imagen debe provenir de una de las hojas de estilo CSS. No puede definir la altura correcta dentro de la etiqueta de imagen en su marcado. Mi solución fue crear una clase, por ejemplo, img200 (que representa una altura de 200px) en mi hoja de estilo, y eso hizo el truco. Así que, nuevamente, lo que debe hacerse para que funcione en Chrome o en los navegadores webkit en general: Configure una clase de altura de imagen en su hoja de estilo para las imágenes que se usan dentro de un scrollPane. ¡Incluya su hoja de estilo antes !!!!! el javascript para jScrollPane. Agregue la clase de altura especial a todas las imágenes que incluya en jScrollPane Eso fue todo. Gracias de nuevo por su rápida respuesta. Muy genial.

ACTUALIZACIÓN DE LA SOLUCIÓN FINAL !!!!!!!!!
Si tiene imágenes dentro de un área jScrollPane, debe asegurarse de lo siguiente para que todo se visualice bien en el navegador webkit, como Chrome o Safari. De lo contrario, provocará problemas de altura y solo una parte de su contenido estará visible.
Esto es lo que tiene que hacer:
Asegúrese de que la alineación de sus hojas de estilo CSS y el JavaScript JScrollPane archivo es correcta. ¡El archivo javascript jScrollPane necesita seguir sus hojas de estilo css y no al revés! También debe agregar una altura a cada imagen que se incluye en el área jScrollPane. Puede hacer esto creando una clase css o puede agregar la dimensión como un atributo directamente a la img en su marcado html.
Si lo tienes en cuenta, hará el truco.

Answer 1

¿Probaste también en Safari? Esto suena como un problema que se produce en Webkit cuando el javascript se incluye antes de la CSS en el encabezado del documento: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

Si eso no es la causa entonces podría ser algo relacionado con el hecho de que tiene una imagen en el panel de desplazamiento Debe incluir el ancho y el alto de la imagen (consulte http://jscrollpane.kelvinluck.com/image2.html) o autoreiniciar el panel (consulte http://jscrollpane.kelvinluck.com/image.html).

espero que ayude :)

Answer 2

Si tienes una imagen dentro de su área JScrollPane div, sólo tiene que definir su anchura y altura.

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

Eso arreglará el error de webkit de jScrollPane.Ah, y por supuesto cargar el CSS antes de JS

Answer 3

dar la llamada a JScrollPane en $(window).load en lugar de $(document).ready

Answer 4

También he descubierto que la adición de una regla CSS para .scroll-panel para la línea de altura resuelve mis problemas de altura.

Por ejemplo:

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

o cualquier línea de la altura de su contenido puede necesitar.

También descubrí que si utiliza @ font-face, jscrollpane puede hacer el cálculo de altura antes de que su fuente se haya cargado correctamente, y por lo tanto, calcular mal. Lo arreglé agregando la configuración:

autoReinitialise: true 

Sin embargo, funciona con un temporizador, así que úselo con cuidado.