Chcę, aby moje ciało przestało przewijać się podczas używania kółka myszy, gdy Modal (z http://twitter.github.com/bootstrap ) na mojej stronie internetowej jest otwarty.
Próbowałem wywołać fragment javascript poniżej, gdy modal jest otwarty, ale bez powodzenia
$(window).scroll(function() { return false; });I
$(window).live('scroll', function() { return false; });Pamiętaj, że nasza witryna zrezygnowała z obsługi IE6, IE7 + musi być jednak kompatybilna.
Odpowiedzi:
Bootstrap modalautomatycznie dodaje klasę modal-opendo ciała, gdy wyświetlane jest modalne okno dialogowe, i usuwa je, gdy okno dialogowe jest ukryte. Dlatego możesz dodać następujące elementy do swojego CSS:
body.modal-open {
overflow: hidden;
}Można argumentować, że powyższy kod należy do bazy kodu Bootstrap CSS, ale jest to łatwa poprawka, aby dodać go do swojej witryny.
Aktualizacja 8 lutego 2013 r.
To przestało działać w programie Bootstrap w wersji 2.3.0 Twittera - nie dodają już modal-openklasy do ciała.
Obejściem tego problemu byłoby dodanie klasy do ciała, gdy modal ma zostać pokazany, i usunięcie go, gdy modal jest zamknięty:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});Aktualizacja 11 marca 2013
Wygląda na to, że modal-openklasa powróci w Bootstrap 3.0, jawnie w celu zapobieżenia przewijaniu:
Ponownie wprowadza .modal-open na ciele (dzięki czemu możemy nuke tam przewijać)
Zobacz: https://github.com/twitter/bootstrap/pull/6342 - spójrz na sekcję modalną .
modal-openpowróci w Bootstrap 3, więc po uruchomieniu powinno być bezpiecznie usunąć powyższy kod.
Akceptowana odpowiedź nie działa na urządzeniach mobilnych (przynajmniej iOS 7 z Safari 7) i nie chcę, aby MOAR JavaScript działał na mojej stronie, gdy CSS to zrobi.
Ten CSS zapobiegnie przewijaniu strony w tle pod modalem:
body.modal-open {
overflow: hidden;
position: fixed;
}Jednak ma również niewielki efekt uboczny polegający na przewijaniu do góry. position:absoluterozwiązuje to, ale ponownie wprowadza możliwość przewijania na telefonie komórkowym.
Jeśli znasz swoją rzutnię ( moja wtyczka do dodawania rzutni do<body> ), możesz po prostu dodać przełącznik css dla 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;
}Dodam to również, aby zapobiec przeskakiwaniu strony leżącej w lewo / w prawo podczas pokazywania / ukrywania modali.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixedciała.
Po prostu ukryj przepełnienie ciała, aby nie przewijało się ono. Gdy ukryjesz modal, przywróć go do automatycznego.
Oto kod:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})Możesz spróbować ustawić rozmiar ciała na rozmiar okna z przepełnieniem: ukryty, gdy modal jest otwarty
Musisz wyjść poza odpowiedź @ charlietfl i wziąć pod uwagę paski przewijania, w przeciwnym razie możesz zobaczyć przepływ dokumentów.
bodyszerokośćbodyprzepełnienie nahiddenJawnie ustaw szerokość ciała na wartość z kroku 1.
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyprzepełnienie naautoUstaw bodyszerokość naauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");Inspirowany przez: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");ostatni krok :)
Ostrzeżenie: poniższa opcja nie dotyczy Bootstrap v3.0.x, ponieważ przewijanie w tych wersjach zostało wyraźnie ograniczone do samego modalu. Jeśli wyłączysz zdarzenia koła, możesz przypadkowo uniemożliwić niektórym użytkownikom przeglądanie zawartości w modach o wysokościach większych niż wysokość rzutni.
Przewijania zdarzeń nie można anulować. Możliwe jest jednak anulowanie kółka myszy i zdarzeń kółka . Wielkim zastrzeżeniem jest to, że nie wszystkie starsze przeglądarki obsługują je, Mozilla dopiero niedawno dodała obsługę tych ostatnich w Gecko 17.0. Nie znam pełnej wersji, ale IE6 + i Chrome je obsługują.
Oto jak je wykorzystać:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddenlepiej na razie.
/* =============================
* 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(); });
});Nie mogłem sprawić, by działał w Chrome tylko przez zmianę CSS, ponieważ nie chciałem, aby strona przewijała się z powrotem na górę. To działało dobrze:
$("#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);
});Spróbuj tego:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}zadziałało dla mnie. (obsługuje IE8)
position: fixed.
Dla Bootstrap , możesz spróbować to (pracuje na
Firefox,ChromeiMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}Mam nadzieję że to pomoże...
Dodawanie klasy „is-modal-open” lub modyfikowanie stylu tagu body za pomocą javascript jest w porządku i będzie działać tak, jak powinno. Ale problem, z którym się spotkamy, polega na tym, że ciało staje się przepełnione: ukryte, przeskoczy na górę, (scrollTop zmieni się na 0). Stanie się to problemem później.
Jako rozwiązanie tego problemu, zamiast zmieniać przepełnienie tagu body: ukryty zmień go na tag HTML
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});Nie jestem pewien co do tego kodu, ale warto spróbować.
W jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});Jak powiedziałem wcześniej, nie jestem w 100% pewien, ale mimo wszystko spróbuj.
Od listopada 2017 Chrome wprowadził nową właściwość css
overscroll-behavior: contain;
co rozwiązuje ten problem, chociaż w chwili pisania ma ograniczoną obsługę wielu przeglądarek.
poniższe łącza zawierają pełne informacje i obsługę przeglądarki
Najlepszym rozwiązaniem jest rozwiązanie tylko dla css body{overflow:hidden}używane przez większość z tych odpowiedzi. Niektóre odpowiedzi zawierają poprawki, które zapobiegają również „skokowi” spowodowanemu znikaniem paska przewijania; jednak żaden nie był zbyt elegancki. Napisałem więc te dwie funkcje, które wydają się działać całkiem dobrze.
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');
}Sprawdź ten jsFiddle, aby zobaczyć, czy jest w użyciu.
open modalszerokości przycisków. Chrome na 8
Wielu sugeruje „przepełnienie: ukryte” na ciele, co nie będzie działać (przynajmniej w moim przypadku), ponieważ spowoduje to przewinięcie strony do góry.
To rozwiązanie działa dla mnie (zarówno na telefonach komórkowych, jak i komputerach) przy użyciu 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');
});Spowoduje to, że przewijanie modalu zadziała i zapobiegnie przewijaniu strony internetowej w tym samym czasie.
Możesz użyć następującej logiki, przetestowałem ją i działa (nawet w 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>Nie jestem w 100% pewien, że to zadziała z Bootstrap, ale warto spróbować - działało z Remodal.js, który można znaleźć na github: http://vodkabears.github.io/remodal/ i miałoby to sens dla metod być całkiem podobnym.
Aby zatrzymać przeskakiwanie strony na górę, a także zapobiec właściwemu przesunięciu zawartości, dodaj klasę do bodymomentu uruchomienia modalu i ustaw następujące reguły CSS:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}To position:statici one height:autołączą się, aby zatrzymać przeskakiwanie treści w prawo. overflow-y:hidden;Zatrzymuje strony od bycia przewijane za modalnej.
Na podstawie tego skrzypka: http://jsfiddle.net/dh834zgw/1/
następujący fragment kodu (używając jquery) wyłączy przewijanie okna:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');I w twoim css:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}Teraz, kiedy usuwasz modal, nie zapomnij usunąć klasy noscroll z tagu html:
$('html').toggleClass('noscroll');overflownależy tego ustawić hidden? +1, ponieważ to działało dla mnie (za pomocą hidden).
Miałem pasek boczny, który został wygenerowany przez hack pola wyboru. Ale głównym pomysłem jest zapisanie przewijania dokumentu i nie zmienianie go podczas przewijania okna.
Po prostu nie podobało mi się przeskakiwanie strony, gdy ciało staje się „przepełnione: ukryte”.
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);
}
});
})
});Niestety żadna z powyższych odpowiedzi nie rozwiązała moich problemów.
W mojej sytuacji strona internetowa pierwotnie ma pasek przewijania. Ilekroć klikam moduł, pasek przewijania nie zniknie, a nagłówek przesunie się nieco w prawo.
Potem próbowałem dodać .modal-open{overflow:auto;}(co większość osób poleciło). Naprawdę naprawiło to problemy: pasek przewijania pojawia się po otwarciu modalu. Pojawia się jednak inny efekt uboczny: „tło pod nagłówkiem przesunie się nieco w lewo wraz z innym długim paskiem za modalem”
Na szczęście po dodaniu {padding-right: 0 !important;}wszystko jest naprawione idealnie. Zarówno nagłówek, jak i tło nie poruszały się, a moduł nadal utrzymuje pasek przewijania.
Mam nadzieję, że pomoże to tym, którzy nadal tkwią w tym problemie. Powodzenia!
Większość elementów jest tutaj, ale nie widzę żadnej odpowiedzi, która łączy to wszystko.
Problem jest trojaki.
(1) zapobiega przewijaniu strony leżącej u jej podstaw
$('body').css('overflow', 'hidden')(2) i usuń pasek przewijania
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) posprzątaj po zwolnieniu modalu
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')Jeśli modal nie jest pełnoekranowy, zastosuj wiązania .modal do nakładki pełnoekranowej.
Właśnie to zrobiłem w ten sposób ...
$('body').css('overflow', 'hidden');Ale kiedy zniknął scroller, wszystko przesunęło się o 20 pikseli, więc dodałem
$('body').css('margin-right', '20px');zaraz po tym.
Pracuje dla mnie.
Jeśli modalne są 100% wysokości / szerokości, „mouseenter / urlopu” będzie działało, aby łatwo włączyć / wyłączyć przewijanie. To naprawdę działało dla mnie:
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);
});Dlaczego nie zrobić tego tak jak Bulma? Gdy modal jest aktywny, dodaj do html swoją klasę .is-clipped, która jest przepełniona: ukryta! Ważna; I to wszystko.
Edycja: Okey, Bulma ma ten błąd, więc musisz dodać także inne rzeczy, takie jak
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}Ponieważ dla mnie ten problem występował głównie w systemie iOS, udostępniam kod, który można naprawić tylko w systemie 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;
});
}Żadna z powyższych odpowiedzi nie działała dla mnie idealnie. Więc znalazłem inny sposób, który działa dobrze.
Wystarczy dodać scroll.(namespace)słuchacza i zestaw scrollTopz następującychdocument do ostatniego z jego wartość ...
a także usuń detektor ze swojego skryptu.
// 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');
});wydaje się, że to nie działa dobrze na chromie. jakieś sugestie, aby to naprawić?
To działało dla mnie:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});