jquery - personalizar - scrollbar css generator

JScrollPane(barra de desplazamiento personalizada) en una ventana modal PopEasy

Question

Publicación por primera vez :-) He buscado una respuesta en todas partes y parece que no puedo encontrarla. No soy un experto en jQuery, pero me salgo bien.

PopEasy: http://thomasgrauer.com/popeasy JScrollPane: http://jscrollpane.kelvinluck.com/index.html

Intento que JSscrollPane funcione dentro de una ventana modal PopEasy. La terminología puede estar desactivada, pero creo que necesito iniciarla después de las cargas modales?

Aquí está el código para los modales PopEasy: básicamente haces clic en un enlace y el modal muestra:

$(''.modalLink'').modal({
    trigger: ''.modalLink'',
    olay:''div.overlay'',
    modals:''div.modal'',
    animationEffect: ''fadeIn'',
    animationSpeed: 300,
    moveModalSpeed: ''slow'',
    openOnLoad: false,
    docClose: true,
    closeByEscape: false,
    moveOnScroll: false,
    resizeWindow: true,
    close:''.close-button''
});

Normalmente, JScrollpane simplemente sería:

$(''.scroll-pane'').jScrollPane();

Asumo (y espero) que la respuesta sea simple y me falta algo pequeño, pero he intentado cosas que todavía no entiendo del todo, como:

jQuery(document).on(''click'',''.modalLink'',function($){
    $(''.right-side'').jScrollPane({});
});

Necesito ayuda :-(

¡Gracias chicos!

Answer 1

Dado que jScrollPane está calculando el contenedor al inicio, le gustaría hacer el reinicio / reinicio después de cargar el modal, ya que PopEasy no tiene una API para las devoluciones de llamada una vez que se carga el modal, esto es un poco complicado.

La salida fácil pero pobre es agregar un tiempo de espera, así:

jQuery(document).on(''click'',''.modalLink'',function($){
    setTimeout(function(){
        $(''.right-side'').jScrollPane({});
    }, 500);
});

La alternativa sería agregar funcionalidad de devolución de llamada a popeasy ejecutando la devolución de llamada después de que se complete la animación. Si necesita reinicializar, deberá acceder a la API jScrollPane de la siguiente manera:

$(function() {
    var pane = $(''.right-side'');
    pane.jScrollPane({});
    var api = pane.data(''jsp'');

    jQuery(document).on(''click'',''.modalLink'',function($){
        setTimeout(function(){
            api.reinitialise();
        }, 500);
    });
});