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.
Réponses:
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 .
modal-opensera de retour dans Bootstrap 3, donc quand cela se lancera, il devrait être sûr de supprimer le code ci-dessus.
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;
}position: fixedle corps.
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');
})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
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.
bodylargeurbodydébordement surhiddenDé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);bodydébordement surautoDé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
$body.css("overflow", "auto");dans la dernière étape :)
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.
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');
});overflow:hiddenc'est mieux pour l'instant.
/* =============================
* 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(); });
});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);
});Pour Bootstrap , vous pouvez essayer (travailler sur
Firefox,ChromeetMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}J'espère que cela t'aides...
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');
});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.
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
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.
open modallargeur des boutons. Chrome le 8
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.
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>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.
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');overflowrégler sur hidden? +1, car cela a fonctionné pour moi (en utilisant hidden).
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);
}
});
})
});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!
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.
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.
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);
});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%;
}É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;
});
}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');
});semble, cela ne fonctionne pas bien sur le chrome. une suggestion pour le réparer?
Cela a fonctionné pour moi:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});