JScrollPane no funciona correctamente con contenido oculto

Instalé jScrollPane en mi sitio web y no puedo hacerlo funcionar.JScrollPane no funciona correctamente con contenido oculto

Mi sitio web funciona de la siguiente manera: desde la página principal, las páginas se cargan dinámicamente utilizando el método load() de jQuery. En la página que cargar Tengo la siguiente secuencia de comandos para lanzar JScrollPane:

$(function(){ 
    $('.scroll-pane').jScrollPane(); 
});

que parece ser llamado. No hay problemas hasta ahora, supongo. El problema es que la página, al principio, no es lo suficientemente larga como para necesitar una barra de desplazamiento. He ocultado contenido que aparece solo en acciones específicas (es decir, hacer clic en un botón muestra el contenido de un párrafo determinado) y cuando hago clic para mostrar el contenido de un div oculto, la barra de desplazamiento no aparece.

también tratamos de llamar $('.scroll-pane').jScrollPane(); como lo muestra el nuevo contenido (es decir, en el caso de que desencadena .show() en el oculto div también me llamo $('.scroll-pane').jScrollPane();) pero no tenía éxito con eso tampoco.

¿Alguien me puede ayudar?

Gracias

EDIT:

me olvidó mencionar la estructura de la página: Tengo un div que tiene class="scroll-pane" y se carga con la carga de la página y que contiene pequeñas divs ocultos que aparecen cuando se hace clic en áreas particulares Me gustaría agregar una barra de desplazamiento al div con el panel de desplazamiento de la clase para hacer que el contenido del div mostrado se pueda desplazar (en este momento el contenido permanece en el tamaño del div pero no es desplazable ya que no se visualiza la barra de desplazamiento jScrollPane mostrado).

Actualización:

traté de poner $('.scroll-pane').jScrollPane(); en la devolución de llamada del método de mis divs .show() y trató de poner class="scroll-pane" a esos divs que aparecen, pero de nuevo no se muestra nada (la barra de desplazamiento no aparece y el div no es desplazable).

Fuente

2012-01-28 Masiar

Si la barra de desplazamiento no aparece cuando se muestra el contenido oculto, no podrá desplazarse. El problema debe provenir del HTML. ¿Sus elementos HTML tienen una "posición" o un "flotante" que los hace salir del flujo HTML? – dievardump

No, en realidad no, están en 'posición: relativa' en mi CSS, en relación con el contenedor principal. Es muy extraño, si no se desplaza porque la barra de desplazamiento no aparece, quizás haya algún tipo de problema de CSS. Daré un cheque al archivo CSS (el que importé + el que ya tenía). – Masiar

Comprobar esta demo proporcionada por el desarrollador del plugin

http://jscrollpane.kelvinluck.com/invisibles.html

Cuando el elemento se mostró por primera vez, simplemente tienes que (re) inicializar el panel de desplazamiento (o incluso se podría utilizar autoReinitialise si desea) y , su ancho y alto se calcularán correctamente.

Todo lo que necesitas es

$(function(){ 
    $('.scroll-pane').jScrollPane({autoReinitialise: true}); 
});

y puede ser la versión reciente del plugin

Fuente

2012-01-29 06:46:53 Cheery

Gracias, en realidad usé ese fragmento de código más tarde, pero luego descubrí otro error. De todos modos, gracias, eso debería haber hecho el trabajo :). – Masiar

Funciona si el bloque .scroll-pane tiene altura. ¿Qué pasa si este bloque tiene solo altura máxima? –

@Bohdan No creo que pueda ser un problema, ya que la altura y el ancho, por lo general, se calculan en función de las dimensiones reales del elemento principal. ¿Puedes mostrarme un ejemplo? – Cheery

Es mejor utilizar propiedad de visibilidad css en lugar reinicialización automática. Cada vez que llamas al método show(), jScrollPane se reinicia. Esto lleva tiempo y tiene un impacto en la animación.

Si utiliza, por ejemplo, métodos de deslizamiento ..(), la animación se inicia correctamente, pero el contenedor desplazable (y sus elementos) aparece un poco más tarde, y eso se ve mal.

var wrapper = jQuery('#gallery-album-preview-wrapper'); 
if (wrapper.css("visibility") == "hidden") { 
    wrapper.css("visibility", "visible").css("display", "none"); 
} 
if (wrapper.is(":hidden")) { 
    wrapper.slideDown(1000); 
} else { 
    wrapper.slideUp(1000); 
}

Fuente

2012-10-27 08:30:43 ruruskyi

JScrollPane no funciona correctamente con contenido oculto

Respuesta

Cuestiones relacionadas