web-dev-qa-db-fra.com

Empêcher le défilement en arrière-plan lors de l'affichage d'un pop-up

J'ai un formulaire qui est affiché dans un popup. Après le chargement, l'arrière-plan est grisé, mais l'utilisateur peut toujours faire défiler le contenu de l'arrière-plan de haut en bas. 

Comment puis-je empêcher le défilement de l'arrière-plan? 

Exemple ici

le lien "envoyer cette citation" à droite de la capture d'écran pdf.

jqueryhtmlpopup
21
Joe

Une option consiste à définir temporairement la propriété overflow sur hidden sur body, ce qui éliminera les barres de défilement mais provoquera un petit scintillement lorsque la page sera ajustée.

L'autre option consiste à exploiter l'événement $(window).scroll() et à renvoyer false à partir de là. Cela causera également un peu de scintillement car le navigateur ne réagit pas aussi rapidement à la déclaration fausse de retour.

Votre meilleur choix est de déplacer vos gestionnaires d’événements click dans un fichier séparé et d’y effectuer la liaison:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

Cela devrait empêcher une page de défiler. N'oubliez pas de supprimer la liaison après la fermeture de la boîte de dialogue, sinon la page ne pourra plus défiler! Vous pouvez supprimer les liens en utilisant:

$(window).unbind('scroll');
17
Tatu Ulmanen

Pour masquer la barre de défilement du corps lors de l’ouverture du popup

document.body.style.overflow = "hidden";

et revenir en arrière lors de la fermeture du popup

document.body.style.overflow = "visible";
27
sudhAnsu63

Ce bloc de code fonctionne pour les appareils IOS mobiles où le problème de défilement est très courant.

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});
0
Madhuri Kulkarni

N'utilisez pas la balise # dans vos liens!

Il essaiera de faire défiler jusqu’à l’ancre # mais, comme elle est vide, il fera défiler vers le haut de la page.

Editez vos liens vers:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(remarquez le href = "")

0
Farlock85