Web sitemdeki Modal ( http://twitter.github.com/bootstrap adresinden ) açılırken fare tekerleğini kullanırken vücudumun kaydırmayı durdurmasını istiyorum .
Modal açıldığında aşağıdaki javascript parçasını aramaya çalıştım ama başarılı olamadım
$(window).scroll(function() { return false; });VE
$(window).live('scroll', function() { return false; });Lütfen web sitemizin IE6 desteği düştüğünü, IE7 + 'nın uyumlu olması gerektiğini unutmayın.
Yanıtlar:
Kalıcı bir iletişim kutusu görüntülendiğinde Bootstrap's modalsınıfı otomatik olarak modal-opengövdeye ekler ve iletişim kutusu gizlendiğinde sınıfı kaldırır. Bu nedenle CSS'nize aşağıdakileri ekleyebilirsiniz:
body.modal-open {
overflow: hidden;
}
Yukarıdaki kodun Bootstrap CSS kod tabanına ait olduğunu iddia edebilirsiniz, ancak bu sitenize eklemek için kolay bir çözümdür.
Güncelleme 8 Şubat 2013
Bu, artık Bootstrap v. 2.3.0 sürümünde çalışmayı durdurdu - artık modal-opensınıfı vücuda eklemiyorlar.
Geçici çözüm, mod gösterilmek üzereyken sınıfı gövdeye eklemek ve mod kapalıyken kaldırmaktır:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
Güncelleme 11 Mart 2013
Görünüşe göre modal-opensınıf, kaymayı önlemek amacıyla Bootstrap 3.0'da geri dönecek:
Gövde üzerinde .modal-open'ı yeniden üretir (böylece oradaki kaydırmayı tıkayabiliriz)
Bkz. Https://github.com/twitter/bootstrap/pull/6342 - Kalıcı bölüme bakın.
modal-openBootstrap 3'te geri dönecek, bu yüzden başlatıldığında yukarıdaki kodu kaldırmak güvenli olmalıdır.
Kabul edilen cevap mobil cihazlarda çalışmıyor (en azından Safari 7 ile iOS 7) ve CSS'nin ne zaman yapacağımı MOAR JavaScript'in sitemde çalışmasını istemiyorum.
Bu CSS, arka plan sayfasının modun altına kaymasını önleyecektir:
body.modal-open {
overflow: hidden;
position: fixed;
}Bununla birlikte, esasen yukarı kaydırmanın hafif bir yan etkisi vardır. position:absolutebunu çözer, ancak mobil cihazda kaydırma özelliğini yeniden sunar.
Görünümünüzü biliyorsanız (görünüm penceresi eklemek için eklentim) için<body> sadece bir css geçiş ekleyebilirsiniz 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;
}Ayrıca, modülleri gösterirken / gizlerken alttaki sayfanın sola / sağa sıçramasını önlemek için de ekliyorum.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixedvücutta olmadan çalışmazdı .
Sadece vücut taşmasını gizleyin ve vücudun kaymasını önler. Kipi gizlediğinizde, otomatik moda geri döndürün.
İşte kod:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})Gövde boyutunu taşma ile pencere boyutuna ayarlamayı deneyebilirsiniz: mod açıkken gizli
@ Charlietfl'in cevabının ötesine geçmeniz ve kaydırma çubuklarını hesaba katmanız gerekir, aksi takdirde belge yeniden akışını görebilirsiniz.
bodyGenişliği kaydedinbodydeğere ayarla:hiddenGövde genişliğini adım 1'deki genişliğe ayarlayın.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodydeğere ayarla:autobodyGenişliği olarak ayarlaauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");İlham kaynağı: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");Son adımda olmalı :)
Uyarı: Aşağıdaki seçenek, Bootstrap v3.0.x ile ilgili değildir, çünkü bu sürümlerde kaydırma modun kendisiyle sınırlıdır. Tekerlek olaylarını devre dışı bırakırsanız, bazı kullanıcıların yükseklikleri görüntü alanı yüksekliğinden daha büyük olan içerikleri görüntülemesini yanlışlıkla engelleyebilirsiniz.
Kaydırma olay, iptal edilemeyen. Ancak fare tekerleği ve tekerlek olaylarını iptal etmek mümkündür . Büyük uyarı, tüm eski tarayıcıların onları desteklememesi, Mozilla'nın son zamanlarda Gecko 17.0'daki ikincisi için destek eklemesi. Tam yayılımı bilmiyorum, ancak IE6 + ve Chrome bunları destekliyor.
Bunlardan nasıl yararlanacağınız aşağıda açıklanmıştır:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddenşimdilik daha iyidir.
/* =============================
* 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(); });
});Yalnızca CSS'yi değiştirerek Chrome'da çalışmasını sağlayamadım, çünkü sayfanın en üste geri dönmesini istemedim. Bu iyi çalıştı:
$("#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);
});İçin Bootstrap , bu (çalışan deneyebilirsiniz
Firefox,ChromeveMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}Bu yardımcı olur umarım...
'İs-modal-open' sınıfını eklemek veya javascript ile gövde etiketi stilini değiştirmek iyidir ve olması gerektiği gibi çalışacaktır. Ancak karşılaşacağımız sorun, vücudun taşması olduğunda: gizli, tepeye atlayacak, (scrollTop 0 olacak). Bu daha sonra bir kullanılabilirlik sorunu haline gelecektir.
Bu soruna bir çözüm olarak, gövde etiketi taşmasını değiştirmek yerine: gizli HTML etiketinde değiştirin
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});Bu koddan emin değilim, ama denemeye değer.
JQuery'de:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});Daha önce söylediğim gibi,% 100 emin değilim ama yine de deneyin.
Kasım 2017 itibariyle Chrome yeni bir css özelliği tanıttı
overscroll-behavior: contain;
Bu yazı yazma çapraz tarayıcı desteği sınırlı olmasına rağmen bu sorunu çözer.
tüm ayrıntılar ve tarayıcı desteği için aşağıdaki bağlantılara bakın
En iyi çözüm, body{overflow:hidden}bu cevapların çoğunda kullanılan css-only çözümdür. Bazı cevaplar, kaybolan kaydırma çubuğunun neden olduğu "sıçramayı" önleyen bir düzeltme sağlar; Ancak, hiçbiri çok zarif değildi. Bu iki işlevi yazdım ve oldukça iyi çalışıyorlar.
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');
}Check out bu jsFiddle kullanımda görmek için.
open modaldüğmelerin genişliğine eşit olur . Chrome on 8
Birçoğu, web sitesinde en üste kaydırılmasını sağlayacağından, çalışmaz (en azından benim durumumda değil), vücutta "taşma: gizli" önerir.
Bu, jQuery kullanarak benim için (hem cep telefonlarında hem de bilgisayarlarda) çalışan çözümdür:
$('.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');
});Bu, modun kaydırılmasını sağlar ve web sitesinin aynı anda kaydırılmasını önler.
Aşağıdaki mantığı kullanabilirsiniz, test ettim ve çalışıyor (IE'de bile)
<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>Bunun Bootstrap ile çalışacağından% 100 emin değilim ama denemeye değer - github'da bulunan Remodal.js ile çalıştı: http://vodkabears.github.io/remodal/ ve yöntemler için mantıklı oldukça benzer olmak.
Sayfanın en üste atlamasını durdurmak ve içeriğin doğru kaydırılmasını önlemek için body, modun ne zaman tetiklendiğine bir sınıf ekleyin ve şu CSS kurallarını ayarlayın:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}Bu var position:staticve height:autobirleştirmek olduğunu sağa içeriğin atlama durdurmak için. overflow-y:hidden;Modal arkasında kaydırılabilir olmaktan sayfayı durdurur.
Bu kemandan yola çıkarak: http://jsfiddle.net/dh834zgw/1/
aşağıdaki snippet (jquery kullanarak) pencere kaydırmasını devre dışı bırakır:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');Ve css'inizde:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}Şimdi kipi kaldırdığınızda, html etiketindeki noscroll sınıfını kaldırmayı unutmayın:
$('html').toggleClass('noscroll');overflowayarlanmamalı mı hidden? +1 olsa da bu benim için çalıştı (kullanarak hidden).
Onay kutusu kesmek tarafından oluşturulan bir kenar çubuğu vardı. Ancak ana fikir, scrollTop belgesini kaydetmek ve pencereyi kaydırırken değiştirmektir.
Gövde 'taşma: gizli' olduğunda sayfanın atlamasını sevmedim.
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);
}
});
})
});Ne yazık ki yukarıdaki cevapların hiçbiri sorunlarımı çözmedi.
Benim durumumda, web sayfasında başlangıçta bir kaydırma çubuğu var. Kipi ne zaman tıklasam, kaydırma çubuğu kaybolmaz ve başlık biraz sağa hareket eder.
Sonra eklemeye çalıştım .modal-open{overflow:auto;}(çoğu insan tavsiye etti). Gerçekten sorunları düzeltti: modal açıldıktan sonra kaydırma çubuğu görünüyor. Bununla birlikte, "başlığın altındaki arka plan, modun arkasındaki başka bir uzun çubukla birlikte biraz sola doğru hareket edecek" başka bir yan etki ortaya çıkıyor.
Neyse ki, ekledikten sonra {padding-right: 0 !important;}her şey mükemmel bir şekilde düzeltildi. Hem başlık hem de gövde arka planı hareket etmedi ve mod hala kaydırma çubuğunu koruyor.
Umarım bu sorunla hala sıkışmış olanlara yardımcı olabilir. İyi şanslar!
Parçaların çoğu burada, ama hepsini bir araya getiren bir cevap görmüyorum.
Sorun üç yönlü.
(1) alttaki sayfanın kaydırılmasını önleme
$('body').css('overflow', 'hidden')(2) ve kaydırma çubuğunu kaldırın
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) mod atıldığında temizleyin
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')Kip tam ekran değilse .modal bağlamaları tam ekran kaplamasına uygulayın.
Modsal% 100 yükseklik / genişlik ise "mouseenter / leave" kaydırmayı kolayca etkinleştirmek / devre dışı bırakmak için çalışır. Bu benim için gerçekten işe yaradı:
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);
});Bunu neden Bulma gibi yapmıyorsun? Modal aktif olduğunda, html'ye sınıflarını ekleyin .is-clipped (taşma): hidden! İmportant; Ve bu kadar.
Düzenleme: Okey, Bulma'da bu hata var, bu yüzden başka şeyler de eklemelisiniz
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}Benim için bu sorun esas olarak iOS'ta sunulduğundan, bunu yalnızca iOS'ta düzeltmek için kod sağlıyorum:
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;
});
}Yukarıdaki cevapların hiçbiri benim için mükemmel sonuç vermedi. Bu yüzden iyi çalışan başka bir yol buldum.
Sadece bir ekleme scroll.(namespace)dinleyici ve set scrollToparasındadocument 's değerinin son için ...
ve ayrıca yakın komut dosyanızdaki dinleyiciyi kaldırın.
// 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');
});Görünüşe göre, bu krom üzerinde iyi çalışmıyor. düzeltmek için herhangi bir öneri?
Bu benim için çalıştı:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});