Faites Défiler JQuery Mobile Panel Séparément Du Contenu

Je suis en train de travailler sur un HTML 5 de l'application mobile à l'aide de JQuery Mobile. La conception des appels pour un menu latéral qui peut faire défiler indépendamment du contenu, de sorte que par exemple, vous pouvez faire défiler quelque part sur la page, ouvrez le menu et faire défiler le menu sans le contenu de la page de défilement.

Pour mettre en œuvre le menu, JQuery Mobile faites glisser les panneaux ont été un choix évident. Cependant, je n'ai pas été capable de les faire défiler séparément du contenu.

J'ai essayé d'utiliser iScroll 4 avec et sans le iScrollView plugin pour faire défiler un JQuery Mobile faites glisser le panneau, mais le défilement ne fonctionne pas dans le panneau, uniquement sur des éléments dans le contenu de la page. Le panneau de contenu peut être poussé et tiré, mais reviennent à sa position de départ (la "bande de caoutchouc").

J'ai aussi essayé d'utiliser jScroll pour cible la div qui est créé par JQuery mobile (".interface utilisateur-panneau-inner"), mais qui aurait les mêmes résultats.

Appel refresh() sur le iScroll objet après montrant le groupe a également n'a pas fonctionné.

Je suis sur le point d'oublier d'utiliser le construit en JQuery Mobile faites glisser les panneaux pour faire ce travail, personne ne sait d'une solution pour faire défiler un JQuery Mobile panel indépendamment du contenu de la div?

OriginalL'auteur Kirkpatrick | 2013-04-30

  1. 21

    Cela a été me rend fou. J'ai utilisé la solution sur ce forum de réponse

    Ajouter cette CSS après la JQueryMobile feuille de style:

        .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;
    }
    Toujours afficher la barre de défilement, de même qu'il ne déborde comment puis-je résoudre ce problème.
    Cette solution ne fonctionne pas pour moi. Si vous avez de la page principale et le panneau de débordement, les deux vont défiler.
    Assurez-vous d'ajouter un élément avec la classe de l'interface utilisateur-panneau-intérieure", de cause ce n'est pas insérée par défaut
    Je suis avec cela, mais malheureusement, cela rendra le panneau de "rebondir" lors du défilement vers le bas.
    Je sais que c'est vieux.f. mais il fonctionne parfaitement lorsque vous faites débordement=auto au lieu de faire défiler toujours. il apparaît lorsque nécessaire et aussi re-scale & position du contenu que de la place qu'il peut prendre. ||| Peut-être que ce sera usefu pour quelqu'un

    OriginalL'auteur Alison

  2. 7
      .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;
}

    C'est la solution fournie par Alison Bricoleur. Pour éviter le Défilement de montrer quand il n'y a rien à faire défiler, changement;

    overflow: scroll;

    à

    overflow: auto;

    OriginalL'auteur Diamond

  3. 4

    J'ai même cas avec vous.
    J'ai besoin d'un menu statique dans le panneau de gauche.
    Je ne veux pas le panneau de défilement.

    Ensuite, j'utilise data-position-fixed="true".

    Sa fonctionne pas moi...
    Je crois que cela résout le problème inverse — défilement de la page lors de la fixation du panneau.

    OriginalL'auteur iqbal

  4. 0

    Je pense que vous devez corriger le contenu lorsque le panneau est ouvert,

    pour vérifier si le panneau est ouvert , u ont cette classe ajoutée à CORPS .l'interface utilisateur du panneau.interface utilisateur-panneau-ouvrir

    Vous devez définir la position : fixed !important; à l' .interface utilisateur-panneau-wrapper dans le cadre du .l'interface utilisateur du panneau.interface utilisateur-panneau-ouvrir

    OriginalL'auteur Mejri Yassine

  5. 0

    Veuillez consulter ma solution à l'aide de css dynamique des paramètres déclenchée avec panelbeforeopen/panelbeforeclose à l'aide de la feuille de style pour le panneau intérieur.

    $(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/

    Collé pied de page mise à jour:

    http://jsfiddle.net/u92m7u2n/

    OriginalL'auteur metamagicson