Voglio che il mio corpo smetta di scorrere quando uso la rotellina del mouse mentre Modal (da http://twitter.github.com/bootstrap ) sul mio sito Web è aperto.
Ho provato a chiamare il pezzo di javascript sotto quando il modale è aperto ma senza successo
$(window).scroll(function() { return false; });E
$(window).live('scroll', function() { return false; });Tuttavia, il nostro sito Web ha perso il supporto per IE6, IE7 + deve essere compatibile.
Risposte:
Bootstrap modalaggiunge automaticamente la classe modal-openal corpo quando viene mostrata una finestra di dialogo modale e la rimuove quando la finestra di dialogo è nascosta. È quindi possibile aggiungere quanto segue al CSS:
body.modal-open {
overflow: hidden;
}Potresti sostenere che il codice sopra appartiene alla base di codice CSS di Bootstrap, ma questa è una soluzione semplice per aggiungerlo al tuo sito.
Aggiornamento 8 febbraio 2013
Questo ora ha smesso di funzionare in Twitter Bootstrap v. 2.3.0 - non aggiungono più la modal-openclasse al corpo.
Una soluzione alternativa sarebbe quella di aggiungere la classe al corpo quando il modale sta per essere mostrato e rimuoverlo quando il modale è chiuso:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});Aggiornamento dell'11 marzo 2013
Sembra che la modal-openclasse tornerà in Bootstrap 3.0, esplicitamente allo scopo di impedire lo scorrimento:
Reintroduce .modal-open sul corpo (così possiamo nuke lì)
Vedi questo: https://github.com/twitter/bootstrap/pull/6342 - guarda la sezione modale .
modal-opentornerà in Bootstrap 3, quindi quando si avvia dovrebbe essere sicuro rimuovere il codice sopra.
La risposta accettata non funziona sui dispositivi mobili (almeno iOS 7 con Safari 7) e non voglio che MOAR JavaScript sia in esecuzione sul mio sito quando CSS funzionerà.
Questo CSS impedisce alla pagina di sfondo di scorrere sotto il modale:
body.modal-open {
overflow: hidden;
position: fixed;
}Tuttavia, ha anche un leggero effetto collaterale di scorrere essenzialmente verso l'alto. position:absoluterisolve questo problema, ma reintroduce la possibilità di scorrere sui dispositivi mobili.
Se conosci il tuo viewport (il mio plugin per aggiungere viewport al<body> ) puoi semplicemente aggiungere un css toggle per il 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;
}Aggiungo anche questo per evitare che la pagina sottostante salti a sinistra / a destra quando mostra / nasconde modali.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixedil corpo.
Basta nascondere il trabocco del corpo e impedisce al corpo di scorrere. Quando nascondi il modale, ripristinalo in automatico.
Ecco il codice:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})Potresti provare a impostare la dimensione del corpo sulla dimensione della finestra con overflow: nascosto quando modale è aperto
Devi andare oltre la risposta di @ charlietfl e l'account per le barre di scorrimento, altrimenti potresti vedere un reflow del documento.
bodylarghezzabodyoverflow suhiddenImpostare esplicitamente la larghezza del corpo su come era nel passaggio 1.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyoverflow suautoImposta bodylarghezza suauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");Ispirato da: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");nell'ultimo passaggio :)
Avvertenza: l'opzione seguente non è rilevante per Bootstrap v3.0.x, poiché lo scorrimento in tali versioni è stato esplicitamente limitato al modale stesso. Se disabiliti gli eventi ruota, potresti inavvertitamente impedire ad alcuni utenti di visualizzare il contenuto in modali con altezze superiori all'altezza della finestra.
L' evento di scorrimento non è annullabile. Tuttavia è possibile annullare la rotellina e ruota eventi. Il grande avvertimento è che non tutti i browser legacy li supportano, Mozilla ha recentemente aggiunto il supporto per quest'ultimo in Gecko 17.0. Non conosco la diffusione completa, ma IE6 + e Chrome li supportano.
Ecco come sfruttarli:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddenper ora è meglio.
/* =============================
* 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(); });
});Non riuscivo a farlo funzionare su Chrome semplicemente cambiando CSS, perché non volevo che la pagina tornasse all'inizio. Questo ha funzionato bene:
$("#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);
});Prova questo:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}ha funzionato per me. (supporta IE8)
position: fixed.
Per Bootstrap , si potrebbe provare questo (lavorando su
Firefox,ChromeeMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}Spero che sia di aiuto...
Aggiungere la classe 'is-modal-open' o modificare lo stile del body tag con javascript va bene e funzionerà come dovrebbe. Ma il problema che dovremo affrontare è quando il corpo diventa troppo pieno: nascosto, salterà in cima, (scrollTop diventerà 0). Questo diventerà un problema di usabilità in seguito.
Come soluzione per questo problema, invece di modificare l'overflow dei tag body: nascosto modificarlo sul tag html
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});Non sono sicuro di questo codice, ma vale la pena provare.
In jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});Come ho detto prima, non sono sicuro al 100% ma provaci comunque.
A partire da novembre 2017 Chrome ha introdotto una nuova proprietà css
overscroll-behavior: contain;
che risolve questo problema anche se al momento della scrittura ha un supporto limitato tra i browser.
vedere i collegamenti seguenti per i dettagli completi e il supporto del browser
La soluzione migliore è la body{overflow:hidden}soluzione solo CSS utilizzata dalla maggior parte di queste risposte. Alcune risposte forniscono una soluzione che impedisce anche il "salto" causato dalla barra di scorrimento che scompare; tuttavia, nessuno era troppo elegante. Quindi, ho scritto queste due funzioni e sembrano funzionare abbastanza bene.
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');
}Scopri questo jsFiddle per vederlo in uso.
open modallarghezza dei pulsanti. Chrome su 8
Molti suggeriscono "overflow: nascosto" sul corpo, che non funzionerà (almeno nel mio caso), poiché farà scorrere il sito Web verso l'alto.
Questa è la soluzione che funziona per me (sia su telefoni cellulari che su computer), usando 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');
});Ciò consentirà allo scorrimento del modale di funzionare e impedirà lo scorrimento del sito Web contemporaneamente.
Potresti usare la seguente logica, l'ho testata e funziona (anche in 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>Non sono sicuro al 100% che funzionerà con Bootstrap ma vale la pena provare - ha funzionato con Remodal.js che può essere trovato su github: http://vodkabears.github.io/remodal/ e avrebbe senso per i metodi essere abbastanza simile.
Per interrompere il salto della pagina verso l'alto e impedire anche il corretto spostamento del contenuto, aggiungi una classe al bodymomento in cui viene attivato il modale e imposta queste regole CSS:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}È il position:statice il height:autoche si combinano per fermare il salto del contenuto a destra. La overflow-y:hidden;ferma pagina dall'essere scorrevole dietro la modale.
Basato su questo violino: http://jsfiddle.net/dh834zgw/1/
il frammento seguente (usando jquery) disabiliterà lo scorrimento della finestra:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');E nel tuo css:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}Ora, quando rimuovi il modale, non dimenticare di rimuovere la classe noscroll dal tag html:
$('html').toggleClass('noscroll');overflowessere impostato su hidden? +1 anche se questo ha funzionato per me (usando hidden).
Avevo una barra laterale generata dall'hack della casella di controllo. Ma l'idea principale è quella di salvare il documento scrollTop e di non modificarlo durante lo scorrimento della finestra.
Semplicemente non mi piaceva il salto della pagina quando il corpo diventa "trabocco: nascosto".
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);
}
});
})
});Purtroppo nessuna delle risposte di cui sopra ha risolto i miei problemi.
Nella mia situazione, la pagina Web originariamente ha una barra di scorrimento. Ogni volta che faccio clic sul modale, la barra di scorrimento non scompare e l'intestazione si sposta leggermente verso destra.
Quindi ho provato ad aggiungere .modal-open{overflow:auto;}(cosa che la maggior parte delle persone ha raccomandato). Ha infatti risolto i problemi: la barra di scorrimento appare dopo aver aperto il modale. Tuttavia, viene fuori un altro effetto collaterale che è che "lo sfondo sotto l'intestazione si sposterà leggermente a sinistra, insieme a un'altra lunga barra dietro il modale"
Fortunatamente, dopo aver aggiunto {padding-right: 0 !important;}, tutto è stato risolto perfettamente. Sia l'intestazione che lo sfondo del corpo non si sono mossi e il modale mantiene ancora la barra di scorrimento.
Spero che questo possa aiutare coloro che sono ancora bloccati da questo problema. In bocca al lupo!
La maggior parte dei pezzi sono qui, ma non vedo alcuna risposta che metta tutto insieme.
Il problema è triplice.
(1) impedisce lo scorrimento della pagina sottostante
$('body').css('overflow', 'hidden')(2) e rimuovere la barra di scorrimento
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) ripulire quando il modale viene respinto
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')Se il modale non è a schermo intero, applica i collegamenti .modal a un overlay a schermo intero.
L'ho appena fatto in questo modo ...
$('body').css('overflow', 'hidden');Ma quando lo scroller è scomparso, ha spostato tutto correttamente 20px, quindi ho aggiunto
$('body').css('margin-right', '20px');subito dopo.
Per me va bene.
Se i modali sono al 100% in altezza / larghezza "mouseenter / lasciare" funzionerà per abilitare / disabilitare facilmente lo scorrimento. Questo ha funzionato davvero per me:
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);
});Perché non farlo come fa Bulma? Quando modale è attivo, quindi aggiungi a html la loro classe. È troncata che è overflow: nascosto! Importante; E questo è tutto.
Modifica: Okey, Bulma ha questo bug, quindi devi aggiungere anche altre cose come
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}Poiché per me questo problema si è presentato principalmente su iOS, fornisco il codice per risolvere questo problema solo su 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;
});
}Nessuna delle risposte sopra ha funzionato perfettamente per me. Quindi ho trovato un altro modo che funziona bene.
Basta aggiungere un scroll.(namespace)ascoltatore e insieme scrollTopdel documentl'ultimo di esso di valore ...
e rimuovi anche l'ascoltatore nel tuo script vicino.
// 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');
});sembra, questo non funziona bene su Chrome. qualche suggerimento per risolverlo?
Questo ha funzionato per me:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});