Désactiver le défilement lorsque la fenêtre contextuelle est active

Une réponse simple, que vous pouvez utiliser et ne serait pas vous obliger à arrêter le défilement de l'événement serait de définir la position de votre #ac-wrapper fixe.

par exemple

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

cette volonté de conserver le récipient de la popup toujours visible (aligné en haut à gauche), mais permettra tout de même de défilement.

Mais défilement de la page avec une fenêtre ouverte, c'est MAL!!! (presque toujours de toute façon)

Raison vous ne voulez pas permettre le défilement est bien, parce que si le popup n'est pas en plein écran ou est semi transparente, les utilisateurs peuvent voir le contenu de défilement derrière la fenêtre contextuelle. En outre, lorsqu'ils fermer le popup ils seront désormais dans une position différente sur la page.

Une solution, c'est que, lorsque vous liez un click des événements en javascript pour afficher cette fenêtre popup, également ajouter une classe au corps à l'aide essentiellement de ces règles:

.my-body-noscroll-class {
    overflow: hidden;
}

Puis, lors de la fermeture de la popup par le déclenchement de l'action ou de l'écarter avec un clic, vous retirez simplement la classe à nouveau, permettant de défilement après le popup a fermé.

Si l'utilisateur fait défiler tout le popup est ouvert, le document ne sera pas de défilement. Lorsque l'utilisateur ferme la fenêtre contextuelle, le défilement deviendra à nouveau disponible et l'utilisateur peut continuer à où il l'avait laissée 🙂

J'ai eu un problème similaire; vouloir désactiver le défilement vertical tout en un "popup" div a été affichée.

La modification de la propriété de dépassement de la body fonctionne, mais aussi le désordre avec le document de largeur.

J'ai opté jquery pour résoudre cette aide et utilisé un espace réservé pour la barre de défilement.
Cela a été fait sans la lier à la scroll événement, ergo cela ne change pas votre position de la barre de défilement ou de provoquer un scintillement 🙂

HTML:

<div id="scrollPlaceHolder"></div>

CSS:

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

Jquery:

function DisableScrollbar()
{
    //exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    //ID's \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y','hidden');

    //get new width
    new_width = $(document).width()

    //update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    //make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    //and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    //exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    //remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

Espère que cette aide.

J'ai eu le même problème et a trouvé un moyen de se débarrasser de lui, vous avez juste à arrêter la propagation sur touchmove sur votre élément qui apparaît. Pour moi, c'était en plein écran le menu qui est apparu sur l'écran et vous ne pouvez pas faire défiler, vous pouvez maintenant.

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});