Empêcher BODY de défiler lorsqu'un modal est ouvert

346

Je veux que mon corps arrête de défiler lorsque j'utilise la molette pendant que le Modal (depuis http://twitter.github.com/bootstrap ) sur mon site Web est ouvert.

J'ai essayé d'appeler le morceau de javascript ci-dessous lorsque le modal est ouvert mais sans succès

$(window).scroll(function() { return false; });

ET

$(window).live('scroll', function() { return false; });

Veuillez noter que notre site Web n'a plus pris en charge IE6, IE7 + doit être compatible cependant.

javascript jquery css scroll xorinzor
la source

468

Bootstrap modalajoute automatiquement la classe modal-openau corps lorsqu'une boîte de dialogue modale est affichée et la supprime lorsque la boîte de dialogue est masquée. Vous pouvez donc ajouter ce qui suit à votre CSS:

body.modal-open {
    overflow: hidden;
}

Vous pourriez faire valoir que le code ci-dessus appartient à la base de code CSS Bootstrap, mais c'est une solution simple pour l'ajouter à votre site.

Mise à jour du 8 février 2013
Cela a maintenant cessé de fonctionner dans Twitter Bootstrap v. 2.3.0 - ils n'ajoutent plus la modal-openclasse au corps.

Une solution de contournement consisterait à ajouter la classe au corps lorsque le modal est sur le point d'être affiché et à la supprimer lorsque le modal est fermé:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Mise à jour du 11 mars 2013 Il semble que la modal-openclasse reviendra dans Bootstrap 3.0, explicitement dans le but d'empêcher le défilement:

Réintroduit .modal-open sur le corps (afin que nous puissions y faire barrage)

Voir ceci: https://github.com/twitter/bootstrap/pull/6342 - regardez la section Modal .

MartinHN
la source

2

cela ne fonctionne plus dans le bootstrap 2.2.2. Espérons que .modal-open reviendra dans le futur ... github.com/twitter/bootstrap/issues/5719

ppetrid

2

@ppetrid Je ne m'attends pas à ce qu'il revienne. Basé sur cette écriture: github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (regardez en bas). Citation: "Plus de défilement modal interne. Au lieu de cela, les modaux se développeront pour héberger leur contenu et la page défilera pour héberger le modal."

MartinHN

2

@Bagata Cool - le modal-opensera de retour dans Bootstrap 3, donc quand cela se lancera, il devrait être sûr de supprimer le code ci-dessus.

MartinHN

2

C'est pourquoi il faut continuer à faire défiler vers le bas, si la réponse choisie ne vous satisfait pas, il y a des chances que vous trouviez des gemmes comme celles-ci. ne m'attendais pas à une réponse de 97+ votes enfouie si profondément sous d'autres commentaires moins appréciés.

Mohd Abdul Mujib

2

le problème est que pour empêcher le document de défiler vers le haut lorsqu'un modal est ouvert, vous devez ajouter body.modal-open {overflow: visible}. Votre solution fonctionne pour le moment, avec l'inconvénient que le document défile vers le haut une fois qu'un modal est ouvert

Patrick

120

La réponse acceptée ne fonctionne pas sur mobile (iOS 7 avec Safari 7, au moins) et je ne veux pas que MOAR JavaScript s'exécute sur mon site lorsque CSS le fera.

Ce CSS empêchera la page d'arrière-plan de défiler sous le modal:

body.modal-open {
    overflow: hidden;
    position: fixed;
}

Cependant, il a également un léger effet secondaire de défilement essentiellement vers le haut. position:absoluterésout ce problème, mais réintroduit la possibilité de faire défiler sur mobile.

Si vous connaissez votre fenêtre ( mon plugin pour ajouter une fenêtre à la<body> ), vous pouvez simplement ajouter une bascule CSS pour la position.

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

J'ajoute également ceci pour empêcher la page sous-jacente de sauter vers la gauche / droite lors de l'affichage / masquage des modaux.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

cette réponse est un x-post.

Brad
la source

7

Merci! Les mobiles (au moins les navigateurs natifs iOS et Android) me donnaient mal à la tête et ne fonctionneraient pas sans position: fixedle corps.

Raul Rene

Merci d'avoir également inclus le code pour empêcher la page de sauter vers la gauche / droite lors de l'affichage / masquage des modaux. C'était extrêmement utile et j'ai vérifié qu'il corrige un problème que je rencontrais sur Safari sur un iPhone 5c exécutant iOS 9.2.1.

Elijah Lofgren

6

Pour corriger le défilement vers le haut, vous pouvez enregistrer la position avant d'ajouter la classe, puis après la suppression de la classe, faites window.scroll jusqu'à la position enregistrée. Voici comment je l'ai corrigé pour moi-même: pastebin.com/Vpsz07zd .

Outil

Bien que je pense que cela ne répondrait qu'à des besoins très basiques, c'était une solution utile. Merci.

Steve Benner

33

Cachez simplement le débordement du corps et cela ne fait pas défiler le corps. Lorsque vous masquez le modal, rétablissez-le en mode automatique.

Voici le code:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

Mehmet Fatih Yıldız
la source

Excellent! Cela m'a aidé. Merci.

pfcodes

21

Vous pouvez essayer de définir la taille du corps sur la taille de la fenêtre avec débordement: masqué lorsque le modal est ouvert

charlietfl
la source

12

cela déplacerait l'écran chaque fois que le modal est ouvert, ce n'est pas pratique, j'ai juste besoin de désactiver le défilement d'arrière-plan

xorinzor

pas sûr que vous puissiez faire défiler les barres sont liées au navigateur et vous ne pouvez pas faire grand chose avec elles

charlietfl

vous pouvez définir modal sur "fixe" afin de ne pas bouger lors du défilement

charlietfl

8

il ne s'agit pas d'empêcher le modal de défiler, il s'agit d'empêcher le corps en arrière-plan de défiler

xorinzor

1

c'est la fenêtre qui défile si le corps la déborde. Par exemple, les barres de défilement ne font pas partie du document.

charlietfl

18

Vous devez aller au-delà de la réponse de @ charlietfl et prendre en compte les barres de défilement, sinon vous risquez de voir un document refluer.

Ouverture du modal:

Enregistrez la bodylargeur
Définissez le bodydébordement surhidden

Définissez explicitement la largeur du corps à ce qu'elle était à l'étape 1.

var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);

Fermeture du modal:

Définissez le bodydébordement surauto

Définissez la bodylargeur surauto

var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

Inspiré par: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

jpap
la source

J'obtenais un écran "nerveux" faute d'un meilleur terme et la clé ici pour moi suivait les paramètres de largeur. Merci beaucoup.

Hcabnettek

1

@Hcabnettek Yep: "jumpy" == "refusion de document". Heureux que cela vous ait aidé! :-)

jpap

existe-t-il une solution css pour cela? ça marche dans tous les navigateurs et mobiles?

Ruben

juste une faute de frappe: elle doit être $body.css("overflow", "auto");dans la dernière étape :)

schneikai

Oh mec, quelle merveilleuse idée. @jpap, vous m'avez aidé à résoudre le problème de refusion de documents qui m'embêtait depuis longtemps.

Goran Radulovic

17

Avertissement: L'option ci-dessous n'est pas pertinente pour Bootstrap v3.0.x, car le défilement dans ces versions a été explicitement limité au modal lui-même. Si vous désactivez les événements de roue, vous risquez d'empêcher par inadvertance certains utilisateurs d'afficher le contenu dans des modaux dont la hauteur est supérieure à la hauteur de la fenêtre d'affichage.

Encore une autre option: les événements de roue

L' événement de défilement n'est pas annulable. Cependant, il est possible d'annuler les événements de roue de souris et de roue . La grande mise en garde est que tous les navigateurs hérités ne les prennent pas en charge, Mozilla n'a ajouté que récemment la prise en charge de ces derniers dans Gecko 17.0. Je ne connais pas la propagation complète, mais IE6 + et Chrome les prennent en charge.

Voici comment les exploiter:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

merv
la source

Votre JSFiddle ne fonctionne pas sur Firefox 24, Chrome 24 ni sur IE9.

AxeEffect

@AxeEffect devrait fonctionner maintenant. Le seul problème était que les références externes à la bibliothèque Bootstrap avaient changé. Merci pour l'information.

merv

2

Cela n'empêche pas les appareils tactiles de défiler, overflow:hiddenc'est mieux pour l'instant.

Webinan

5

ils fonctionnent tous, mais pas pour les appareils mobiles. -__- Testé Android 4.1 et Chrome

Tower Jimmy

@TowerJimmy, vous devez probablement annuler les événements tactiles ou glisser pour cela (si cela est même possible)

xorinzor

9

/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function theMouseWheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', theMouseWheel, false);
  }
  window.onmousewheel = document.onmousewheel = theMouseWheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on('show', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on('hide', function () { enable_scroll(); });
});

jparkerweb
la source

9

Impossible de le faire fonctionner sur Chrome simplement en changeant CSS, car je ne voulais pas que la page défile vers le haut. Cela a bien fonctionné:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

tetsuo
la source

1

c'est la seule solution qui a fonctionné pour moi sur le bootstrap 3.2.

volx757

1

J'ai eu le problème de passer au premier plan avec les sidenavs à matériau angulaire. C'était la seule réponse qui semble fonctionner dans tous les cas (bureau / mobile + autoriser le défilement dans le modal / sidenav + laisser la position de défilement du corps fixe sans sauter).

cYrixmorten

C'est aussi la seule solution qui a réellement fonctionné pour moi. tx

Deedz

travaillé pour moi, bootstrap v4

Deano

9

Essaye celui-là:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

ça a marché pour moi. (prend en charge IE8)

fatCop
la source

4

Cela fonctionne mais vous fait également sauter au sommet lorsque vous ouvrez un modal lors de l'utilisation position: fixed.

AlexioVay

8

Pour Bootstrap , vous pouvez essayer (travailler sur Firefox, Chromeet Microsoft Edge):

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

J'espère que cela t'aides...

Murat Yıldız
la source

7

Ajouter la classe 'is-modal-open' ou modifier le style de la balise body avec javascript est correct et cela fonctionnera comme supposé. Mais le problème auquel nous devrons faire face est lorsque le corps devient trop plein: caché, il sautera vers le haut, (scrollTop deviendra 0). Cela deviendra un problème d'utilisation plus tard.

Comme solution à ce problème, au lieu de changer le débordement de la balise body: caché, changez-le sur la balise html

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

Jassim Abdul Latheef
la source

1

C'est absolument la bonne réponse car la réponse du consensus général fait défiler la page vers le haut, ce qui est une expérience utilisateur horrible. Vous devriez écrire un blog à ce sujet. J'ai fini par en faire une solution globale.

Smith

Cela ne fonctionnera pas sur l'iphone.

BadriNarayanan Sridharan

6

Je ne suis pas sûr de ce code, mais ça vaut le coup.

Dans jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

Comme je l'ai déjà dit, je ne suis pas sûr à 100% mais essayez quand même.

Anish Gupta
la source

1

Cela n'empêche pas le corps de défiler pendant que le modal est ouvert

xorinzor

@xorinzor, vous avez déclaré dans la section commentaires de la réponse de charlietfl que cela fonctionne. Mais vous avez dit: cela n'empêche pas le corps de défiler pendant que le modal est ouvert.

Anish Gupta

vrai mais pour l'instant c'est la seule solution qui fonctionne en partie et je suis d'accord avec. la raison pour laquelle j'ai marqué sa réponse comme réponse est parce qu'il était plus tôt avec la réponse.

xorinzor

@xorinzor vraiment, je pensais avoir répondu avant lui, cela pourrait être un problème étrange. c'est bien

Anish Gupta

5

Depuis novembre 2017, Chrome a introduit une nouvelle propriété css

overscroll-behavior: contain;

ce qui résout ce problème même si, au moment de la rédaction, la prise en charge de plusieurs navigateurs est limitée.

voir les liens ci-dessous pour plus de détails et la prise en charge du navigateur

user1095118
la source

4

La meilleure solution est la solution CSS uniquement body{overflow:hidden}utilisée par la plupart de ces réponses. Certaines réponses fournissent un correctif qui empêche également le «saut» causé par la barre de défilement disparue; cependant, aucun n'était trop élégant. J'ai donc écrit ces deux fonctions, et elles semblent fonctionner assez bien.

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

Consultez ce jsFiddle pour le voir en cours d'utilisation.

Stephen M. Harris
la source

Ce n'est pas si vieux mais rien de tout ça ne marche du tout pour moi pas même le violon Je peux encore faire défiler la fenêtre, qu'est-ce qui me manque?

atterri

Ouvrez et fermez le modal plusieurs fois, et le DIV vert principal rétrécit et rétrécit!

Webinan

@Webinan Je ne vois pas cela dans Chrome sur Win7. Quelle est la taille de votre navigateur et de votre fenêtre?

Stephen M. Harris

1

@smhmic après environ 20 fois d'ouverture et de fermeture, la largeur de la div verte devient égale à la open modallargeur des boutons. Chrome le 8

Webinan

Similaire à la réponse de @ jpap ( stackoverflow.com/a/16451821/5516499 ) mais avec des bogues ajoutés. :-(

Kivi Shapiro

4

Beaucoup suggèrent "débordement: caché" sur le corps, ce qui ne fonctionnera pas (du moins pas dans mon cas), car cela fera défiler le site vers le haut.

C'est la solution qui fonctionne pour moi (à la fois sur les téléphones portables et les ordinateurs), en utilisant jQuery:

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

Cela fera fonctionner le défilement du modal et empêchera le site Web de défiler en même temps.

Danie
la source

Il semble que cette solution corrige également ce bogue iOS: hackernoon.com/…

Gotenks

3

Vous pouvez utiliser la logique suivante, je l'ai testée et cela fonctionne (même dans IE)

   <html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $('#locker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind('scroll',lockscroll);

        })  


        $('#unlocker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind('scroll');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

myriacl
la source

2

Je ne suis pas sûr à 100% que cela fonctionnera avec Bootstrap mais ça vaut le coup d'essayer - cela a fonctionné avec Remodal.js qui peut être trouvé sur github: http://vodkabears.github.io/remodal/ et cela aurait du sens pour les méthodes être assez similaire.

Pour arrêter le saut de page vers le haut et également empêcher le déplacement correct du contenu, ajoutez une classe au bodymoment du déclenchement du modal et définissez ces règles CSS:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

C'est le position:staticet le height:autoqui se combinent pour arrêter le saut de contenu vers la droite. L' overflow-y:hidden;empêche la page de défiler derrière le modal.

AdamJB
la source

Cette solution fonctionne parfaitement pour moi dans Safari 11.1.1, Chrome 67.0.3396.99 et Firefox 60.0.2. Merci!

Dom

2

Basé sur ce violon: http://jsfiddle.net/dh834zgw/1/

l'extrait de code suivant (à l'aide de jquery) désactivera le défilement de la fenêtre:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

Et dans votre css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Maintenant, lorsque vous supprimez le modal, n'oubliez pas de supprimer la classe noscroll sur la balise html:

$('html').toggleClass('noscroll');

lingue
la source

Ne devrait-on pas le overflowrégler sur hidden? +1, car cela a fonctionné pour moi (en utilisant hidden).

mhulse

2

J'ai eu une barre latérale qui a été générée par un piratage de case à cocher. Mais l'idée principale est de sauvegarder le document scrollTop et de ne pas le changer lors du défilement de la fenêtre.

Je n'ai tout simplement pas aimé le saut de page lorsque le corps devient «débordement: caché».

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

Développer l'extrait

Lozhachevskaya Anastasiya
la source

2

Malheureusement, aucune des réponses ci-dessus n'a résolu mes problèmes.

Dans ma situation, la page Web a à l'origine une barre de défilement. Chaque fois que je clique sur le modal, la barre de défilement ne disparaîtra pas et l'en-tête se déplacera un peu à droite.

Ensuite, j'ai essayé d'ajouter .modal-open{overflow:auto;}(ce que la plupart des gens ont recommandé). Il a en effet résolu les problèmes: la barre de défilement apparaît après avoir ouvert le modal. Cependant, un autre effet secondaire se dégage qui est que "l'arrière-plan sous l'en-tête se déplacera un peu vers la gauche, avec une autre longue barre derrière le modal"

Heureusement, après avoir ajouté {padding-right: 0 !important;}, tout est parfaitement réglé. L'en-tête et l'arrière-plan du corps n'ont pas bougé et le modal conserve toujours la barre de défilement.

J'espère que cela peut aider ceux qui sont toujours aux prises avec ce problème. Bonne chance!

Bocard Wang
la source

1

La plupart des pièces sont ici, mais je ne vois pas de réponse qui rassemble tout cela.

Le problème est triple.

(1) empêcher le défilement de la page sous-jacente

$('body').css('overflow', 'hidden')

(2) et retirez la barre de défilement

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3) nettoyer lorsque le modal est rejeté

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

Si le modal n'est pas plein écran, appliquez les liaisons .modal à une superposition plein écran.

evoskuil
la source

4

Cela empêche également le défilement dans le modal.

Daniel

Même problème. Avez-vous trouvé une solution? @Daniel

AlexioVay

@Vay sorte de. Découvrez ceci: blog.christoffer.me/…

Daniel

1

Ma solution pour Bootstrap 3:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

car pour moi le seul overflow: hiddende la body.modal-openclasse n'a pas empêché la page de se déplacer vers la gauche à cause de l'original margin-right: 15px.

pierrea
la source

1

Je viens de le faire de cette façon ...

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

Mais lorsque le scroller a disparu, il a tout déplacé à 20 pixels, j'ai donc ajouté

$('body').css('margin-right', '20px');

juste après.

Travaille pour moi.

Falaise
la source

Cela ne fonctionne que si le modal est plus petit que la taille de l'écran.

Sergey

1

Si les modales sont à 100% hauteur / largeur, "mouseenter / Leave" fonctionnera pour activer / désactiver facilement le défilement. Cela a vraiment fonctionné pour moi:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});

Des nattes
la source

1

travaillé pour moi

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

namal
la source

1

Pourquoi ne pas faire ça comme Bulma? Lorsque modal est actif, ajoutez à html leur classe .is-clipped qui est en débordement: caché! Important; Et c'est tout.

Edit: Okey, Bulma a ce bug, vous devez donc ajouter d'autres choses comme

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

nrkz
la source

1

Étant donné que pour moi ce problème se présente principalement sur iOS, je fournis le code pour le corriger uniquement sur iOS:

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

LowFieldTheory
la source

1

Aucune des réponses ci-dessus ne fonctionnait parfaitement pour moi. J'ai donc trouvé un autre moyen qui fonctionne bien.

Ajoutez simplement un scroll.(namespace)écouteur et un ensemble scrollTopdedocument fichiers au dernier de sa valeur ...

et supprimez également l'écouteur dans votre script de fermeture.

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {

  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

mise à jour

semble, cela ne fonctionne pas bien sur le chrome. une suggestion pour le réparer?

Pars
la source

0

Cela a fonctionné pour moi:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

Gerhard Liebenberg
la source

0

Pour ceux qui se demandent comment obtenir l'événement de défilement pour le modal bootstrap 3:

$(".modal").scroll(function() {
    console.log("scrolling!);
});

Arie
la source

Empêcher BODY de défiler lorsqu'un modal est ouvert

Réponses:

Ouverture du modal:

Fermeture du modal:

Encore une autre option: les événements de roue

JSFiddle

mise à jour