jquery-mobile - instalar - paginacion jquery mobile

Desplace el panel de JQuery Mobile por separado del contenido

Question

Estoy trabajando en una aplicación móvil HTML 5 usando JQuery Mobile. El diseño requiere un menú de barra lateral que puede desplazarse independientemente del contenido principal, por lo que, por ejemplo, puede desplazarse en algún lugar de la página, abrir el menú y desplazarse dentro de ese menú sin que el contenido de la página se desplace.

Para implementar el menú, los paneles deslizantes de JQuery Mobile fueron una opción obvia. Sin embargo, no he podido hacer que se desplacen por separado del contenido.

He intentado usar iScroll 4 con y sin el complemento iScrollView para desplazar un panel deslizante de JQuery Mobile, pero el desplazamiento no funciona en el panel, solo en los elementos del contenido de la página. El contenido del panel se puede empujar y tirar, pero volverá a su posición inicial (el efecto "banda de goma").

También he intentado usar jScroll para apuntar a la jScroll creada por JQuery mobile (".ui-panel-inner"), pero eso tuvo los mismos resultados.

La llamada a refresh() en el objeto iScroll después de mostrar que el panel tampoco funcionó.

Estoy a punto de olvidarme de usar los paneles deslizantes integrados de JQuery Mobile para hacer que esto funcione. ¿Alguien sabe de una solución para desplazar un panel de JQuery Mobile independientemente del div de contenido?

Answer 1

Consulte mi solución usando la configuración dinámica de css activada con el panel antes de abrir / panel antes de cerrar usando la hoja de estilo anterior para el panel interno.

$(document).on("panelbeforeopen", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "hidden", "position": "fixed" }); }).on("panelbeforeclose", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "scroll", "position": "absolute" }); });

http://jsfiddle.net/ohxdtwga/

Actualización de pie de página pegado:

http://jsfiddle.net/u92m7u2n/

Answer 2

Creo que tienes que arreglar el contenido cuando el panel está abierto

para verificar si el panel está abierto, u ha agregado esta clase a BODY .ui-panel.ui-panel-open

Tienes que establecer la posición: ¡fijo! Importante; a .ui-panel-wrapper debajo de .ui-panel.ui-panel-open

Answer 3

Esto me estaba volviendo loco también. Utilicé la solución en este foro de respuesta.

Agregue este CSS después de la hoja de estilo JQueryMobile:

    .ui-panel.ui-panel-open {
        position:fixed;
    }
    .ui-panel-inner {
        position: absolute;
        top: 1px;
        left: 0;
        right: 0;
        bottom: 0px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

Answer 4

Tengo un caso similar contigo. Necesito un menú estático en el panel del lado izquierdo. No quiero el panel, desplazándome.

Luego, uso data-position-fixed="true" .

Answer 5

  .ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Esta es la solución provista por Alison Tinker. Para evitar que el Desplazamiento se muestre cuando no haya nada que desplazar, cambie;

overflow: scroll;

a

overflow: auto;