Zapobiegaj przewijaniu BODY po otwarciu modalu

347

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.

javascript jquery css scroll Xorinzor
źródło

469

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ą .

MartinHN
źródło

2

to już nie działa w bootstrap 2.2.2. Mam nadzieję, że .modal-open powróci w przyszłości ... github.com/twitter/bootstrap/issues/5719

ppetrid

2

@ppetrid Nie oczekuję, że zwróci. Na podstawie tego tekstu : github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (spójrz na dół). Cytat: „Nigdy więcej wewnętrznego przewijania modalnego. Zamiast tego moduły będą rosły, aby pomieścić ich zawartość, a strona przewinie się, aby pomieścić modalne”.

MartinHN,

2

@Bagata Cool - modal-openpowróci w Bootstrap 3, więc po uruchomieniu powinno być bezpiecznie usunąć powyższy kod.

MartinHN

2

Dlatego należy przewijać w dół, jeśli wybrana odpowiedź Cię nie zadowoli, są szanse, że znajdziesz takie klejnoty. nie spodziewałem się, że ponad 97 głosowanych odpowiedzi jest tak głęboko ukrytych pod innymi mniej lubianymi komentarzami.

Mohd Abdul Mujib

2

Problem polega na tym, że aby zapobiec przewijaniu dokumentu do góry po otwarciu modalu, trzeba było dodać body.modal-open {overflow: visible}. Twoje rozwiązanie działa w tej chwili, z drugiej jednak strony, że przewija dokument do góry raz modalnego jest openen

Patrick

120

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;
}

ta odpowiedź jest postem x.

Ćwiek
źródło

7

Dzięki! Telefony komórkowe (przynajmniej natywna przeglądarka iOS i Android) sprawiały mi ból głowy i nie działały bez position: fixedciała.

Raul Rene

Dziękujemy za uwzględnienie kodu zapobiegającego przeskakiwaniu strony w lewo / prawo podczas wyświetlania / ukrywania modali. Było to bardzo przydatne i zweryfikowałem, że rozwiązuje problem, który miałem w Safari na iPhonie 5c z iOS 9.2.1.

Elijah Lofgren

6

Aby naprawić przewijanie do góry, możesz zapisać pozycję przed dodaniem klasy, a następnie po jej usunięciu wykonaj okno. Przewiń do zapisanej pozycji. Tak to naprawiłem dla siebie: pastebin.com/Vpsz07zd .

Narzędzie

Chociaż wydaje mi się, że spełniałoby to tylko bardzo podstawowe potrzeby, było to przydatne rozwiązanie. Dzięki.

Steve Benner,

33

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');
})

Mehmet Fatih Yıldız
źródło

Świetny! To mi pomogło. Dzięki.

pfcodes

21

Możesz spróbować ustawić rozmiar ciała na rozmiar okna z przepełnieniem: ukryty, gdy modal jest otwarty

Charlietfl
źródło

12

spowoduje to przesunięcie ekranu za każdym razem, gdy modal jest otwierany, co nie jest wygodne, wystarczy wyłączyć przewijanie w tle

xorinzor

nie jestem pewien, że można przeglądarka przewijania są związane i nie można zrobić wiele z nich

charlietfl

możesz ustawić modal na „naprawiony”, aby nie przesuwał się podczas przewijania

charlietfl

8

nie chodzi o zatrzymanie przewijania modalu, chodzi o powstrzymanie przewijania ciała w tle

xorinzor

1

jest to okno, które przewija się, jeśli przepełnia je ciało. Na przykład paski przewijania nie są częścią dokumentu.

charlietfl

18

Musisz wyjść poza odpowiedź @ charlietfl i wziąć pod uwagę paski przewijania, w przeciwnym razie możesz zobaczyć przepływ dokumentów.

Otwarcie modalu:

Zapisz bodyszerokość
Ustaw bodyprzepełnienie nahidden

Jawnie ustaw szerokość ciała na wartość z kroku 1.

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

Zamknięcie modalu:

Ustaw bodyprzepełnienie naauto

Ustaw bodyszerokość naauto

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

Inspirowany przez: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

jpap
źródło

Z powodu braku lepszego terminu pojawiał się ekran „przeskakujący”, a kluczem tutaj było śledzenie ustawień szerokości. Wielkie dzięki.

Hcabnettek

1

@Hcabnettek Tak: „jumpy” == „przeładowanie dokumentu”. Cieszę się, że to pomogło! :-)

jpap

czy jest na to rozwiązanie css? czy działa we wszystkich przeglądarkach i urządzeniach mobilnych?

Ruben,

tylko literówka: To musi być $body.css("overflow", "auto");ostatni krok :)

schneikai

O rany, co za cudowny pomysł. @jpap pomogłeś mi rozwiązać problem z przeładowaniem dokumentów, który mnie męczył przez długi czas.

Goran Radulovic

17

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.

Jeszcze inna opcja: wydarzenia z kół

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');
  });

JSFiddle

merv
źródło

Twój JSFiddle nie działa w Firefox 24, Chrome 24 ani w IE9.

AxeEffect

@AxeEffect powinno już działać. Jedynym problemem było to, że zmieniły się zewnętrzne odwołania do biblioteki Bootstrap. Dzięki za heads-upy.

merv 30.09.13

2

Nie zapobiega to przewijaniu urządzeń dotykowych, tym overflow:hiddenlepiej na razie.

Webinan

5

wszystkie działają, ale nie na urządzenia mobilne. -__- Testowano Androida 4.1 i Chrome

Tower Jimmy

@TowerJimmy prawdopodobnie musisz anulować dotyk lub przeciągnij do tego zdarzenia (jeśli to w ogóle możliwe)

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
źródło

9

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);
});

tetsuo
źródło

1

to jedyne rozwiązanie, które działało dla mnie w bootstrap 3.2.

volx757

1

Miałem przeskocz do najwyższego problemu z sidenavami z materiałów kątowych. To była jedyna odpowiedź, która wydaje się działać we wszystkich przypadkach (komputer stacjonarny / telefon komórkowy + zezwolić na przewijanie w modal / sidenav + pozostawić pozycję przewijania ciała ustaloną bez przeskakiwania).

cYrixmorten,

Jest to również jedyne rozwiązanie, które faktycznie działało dla mnie. tx

Deedz,

9

Spróbuj tego:

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

zadziałało dla mnie. (obsługuje IE8)

fatCop
źródło

4

Działa to, ale powoduje również przeskakiwanie na górę po otwarciu modalu podczas używania position: fixed.

AlexioVay,

8

Dla Bootstrap , możesz spróbować to (pracuje na Firefox, Chromei Microsoft Edge):

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

Mam nadzieję że to pomoże...

Murat Yıldız
źródło

7

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');
});

Jassim Abdul Latheef
źródło

1

To jest absolutnie poprawna odpowiedź, ponieważ ogólna zgoda przewija stronę do góry, co jest okropnym doświadczeniem dla użytkownika. Powinieneś napisać na ten temat blog. Skończyło się to przekształceniem tego w globalne rozwiązanie.

Smith

6

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.

Anish Gupta
źródło

1

To nie zapobiega przewijaniu ciała, gdy modal jest otwarty

xorinzor

@xorinzor powiedziałeś w sekcji komentarzy odpowiedzi Charlietfl, że to działa. Ale powiedziałeś: To nie zapobiega przewijaniu ciała, gdy modal jest otwarty.

Anish Gupta

to prawda, ale na razie jest to jedyne rozwiązanie, które częściowo działa i nic mi nie jest. powodem, dla którego oznaczyłem jego odpowiedź jako odpowiedź, jest to, że był wcześniej z odpowiedzią.

xorinzor,

@ Xorinzor naprawdę, myślałem, że odpowiedziałem przed nim / nią, może to być jakaś dziwna usterka. w porządku

Anish Gupta

5

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

użytkownik1095118
źródło

4

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.

Stephen M. Harris
źródło

To nie jest tak stare, ale nic z tego nie działa, nawet skrzypce Nadal mogę przewijać okno, czego mi brakuje?

wylądował

Otwórz i zamknij modal kilka razy, a główny zielony DIV kurczy się i kurczy!

Webinan

@Webinan Nie widzę tego w Chrome na Win7. Jaka jest twoja przeglądarka i rozmiar rzutni?

Stephen M. Harris

1

@smhmic po około 20-krotnym otwarciu i zamknięciu szerokość zielonego div staje się równa open modalszerokości przycisków. Chrome na 8

Webinan

Podobne do odpowiedzi @ jpap ( stackoverflow.com/a/16451821/5516499 ), ale z dodanymi błędami. :-(

Kivi Shapiro,

4

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.

Danie
źródło

Wygląda na to, rozwiązanie to poprawki błędów iOS też: hackernoon.com/...

Gotenks

3

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>

myriacl
źródło

2

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.

AdamJB
źródło

To rozwiązanie działa idealnie dla mnie w Safari 11.1.1, Chrome 67.0.3396.99 i Firefox 60.0.2. Dzięki!

Dom

2

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');

molwa
źródło

Czy nie overflownależy tego ustawić hidden? +1, ponieważ to działało dla mnie (za pomocą hidden).

mhulse

2

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);
            }
        });
    })

});

Rozwiń fragment kodu

Lozhachevskaya Anastasiya
źródło

2

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!

Bocard Wang
źródło

1

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.

evoskuil
źródło

4

Zapobiega to także przewijaniu w obrębie modalu.

Daniel,

Taki sam problem. Znalazłeś rozwiązanie? @Daniel

AlexioVay,

@Vay Sortuj. Sprawdź to: blog.christoffer.me/...

Daniel,

1

Moje rozwiązanie dla Bootstrap 3:

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

ponieważ dla mnie jedyny overflow: hiddenw body.modal-openklasie nie uniemożliwił przesunięcia strony w lewo z powodu oryginału margin-right: 15px.

pierrea
źródło

1

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.

Klif
źródło

Działa to tylko wtedy, gdy modal jest mniejszy niż rozmiar ekranu.

Siergiej

1

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); 
});

Maty
źródło

1

pracował dla mnie

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

namal
źródło

1

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%; 
}

nrkz
źródło

1

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;
    });
  }

Teoria LowField
źródło

1

Ż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');

});

aktualizacja

wydaje się, że to nie działa dobrze na chromie. jakieś sugestie, aby to naprawić?

Pars
źródło

0

To działało dla mnie:

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

Gerhard Liebenberg
źródło

0

Dla tych, którzy zastanawiają się, jak uzyskać zdarzenie przewijania dla modalu bootstrap 3:

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

Arie
źródło

Zapobiegaj przewijaniu BODY po otwarciu modalu

Odpowiedzi:

Otwarcie modalu:

Zamknięcie modalu:

Jeszcze inna opcja: wydarzenia z kół

JSFiddle

aktualizacja