overflow-y:hidden IOS problème à l'intérieur de défilement div

Je suis en construction d'un site responsive qui a des superpositions de glisser sur le côté. La question est sur les mobiles de ces superpositions doivent être en mesure de faire défiler, mais je ne veux pas que la page derrière pour les faire défiler. Sur le bureau de réglage overflow:hidden œuvre pour faire cesser la page de défilement, mais encore de permettre le glisser hors de la div pour les faire défiler. Cependant, dans IOS cette propriété ne fonctionne pas. La page de base est toujours de défilement. J'ai créé un jsbin ci-dessous. Quelqu'un peut-il me dire comment obtenir le noir div pour faire défiler sur IOS, mais de prévenir la page de base de défilement? Il fonctionne très bien sur le bureau mais pas sur mobile.

http://jsbin.com/isayuy/4/

Grâce

OriginalL'auteur Scoota P | 2013-06-25

  1. 17

    Vous devez ajouter ceci dans votre CSS:

    html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }

    Qui fonctionne pour moi. Voir ici: http://jsbin.com/isayuy/10/

    Qui semble fonctionner, aucune idée de la façon d'arrêter de la faire rebondir?
    Il y a peu d'alternatives pour arrêter de rebondir, en fonction de qui vous voulez arrêter l'ensemble du corps, certains éléments (mais conserver d'autres, comme le défilement div), etc. Voir cet autre fil pour une discussion approfondie du problème et des solutions possibles. stackoverflow.com/questions/12663576/...
    David Taiaroa conseils résolu de la faire rebondir problème pour moi. J'ai ajouté de la position fixe pour le html sélecteur
    Le défilement dans la div n'est pas lisse. Donc, si vous balayez rapidement, alors la page en douceur, continuez à faire défiler un peu plus longtemps.

    OriginalL'auteur Tim Wasson

  2. 2

    La solution de @Tim Wasson fonctionne pour moi.

    Comme une autre option, je me demandais si il ya une raison pourquoi vous ne faites pas de position:fixe à la balise body lorsque le slide-outs sont visibles?

    http://jsbin.com/isayuy/6

    Appologies si je suis absent quelque chose d'évident.

    Bonne chance!

    OriginalL'auteur David Taiaroa

  3. 1

    Voici ce que je fais, cette solution évite le fond de défilement, tout en conservant la position initiale (c'est à dire qu'il ne veut pas sauter vers le haut).

        preventScroll : function(prevent) {
        var body = $('body'), html = $('html'), scroll;
        if (prevent) {
            var width = body.css('width');
            scroll = window.pageYOffset;
            //This is all you need to do to prevent scroll on everything except iOS.
            html.css({ 'overflow': 'hidden'});
            //For iOS, change it to fixed positioning and make it in the same place as
            //it was scrolled.
            //For all systems, change max-width to width; this prevents the page getting
            //wider when the scrollbar disappears.
            body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
        } else {
            scroll = -parseInt(body.css('top'));
            html.css({ 'overflow': '' });
            body.css({ 'position': '', 'top': '', 'max-width': '' });
            window.scrollTo(0, scroll);
        }
    },

    Cela va entraîner des problèmes si vous redimensionnez (rotation de téléphone), tandis que de défilement est de la prévenir; j'ai aussi un événement de redimensionnement qui appelle preventScroll(faux) et puis preventScroll(true) pour mettre à jour la position dans cette affaire.

    OriginalL'auteur sam

  4. 1

    oui. c'est le travail.et ajouté le code suivant aussi

    if (window.location == window.parent.location &&
    navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('#orderpop').attr('style', 
                        '-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}

preventScroll : function(prevent) {
    var body = $('body'), html = $('html'), scroll;
    if (prevent) {
        var width = body.css('width');
        scroll = window.pageYOffset;
        //This is all you need to do to prevent scroll on everything except iOS.
        html.css({ 'overflow': 'hidden'});
        //For iOS, change it to fixed positioning and make it in the same place as
        //it was scrolled.
        //For all systems, change max-width to width; this prevents the page getting
        //wider when the scrollbar disappears.
        body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
    } else {
        scroll = -parseInt(body.css('top'));
        html.css({ 'overflow': '' });
        body.css({ 'position': '', 'top': '', 'max-width': '' });
        window.scrollTo(0, scroll);
    }
}

    OriginalL'auteur senthil kumar