Verhindern Sie, dass BODY beim Öffnen eines Modals einen Bildlauf durchführt

346

Ich möchte, dass mein Körper nicht mehr scrollt, wenn ich das Mausrad benutze, während das Modal (von http://twitter.github.com/bootstrap ) auf meiner Website geöffnet ist.

Ich habe versucht, das unten stehende Stück Javascript aufzurufen, wenn das Modal geöffnet wird, aber ohne Erfolg

$(window).scroll(function() { return false; });

UND

$(window).live('scroll', function() { return false; });

Bitte beachten Sie, dass unsere Website die Unterstützung für IE6 eingestellt hat. IE7 + muss jedoch kompatibel sein.

javascript  jquery  css  scroll 
— Xorinzor
quelle

Antworten:

468

Bootstraps modalfügen die Klasse automatisch modal-openzum Body hinzu, wenn ein modaler Dialog angezeigt wird, und entfernen sie, wenn der Dialog ausgeblendet ist. Sie können Ihrem CSS daher Folgendes hinzufügen:

body.modal-open {
    overflow: hidden;
}

Sie könnten argumentieren, dass der obige Code zur Bootstrap-CSS-Codebasis gehört, aber dies ist eine einfache Lösung, um ihn Ihrer Site hinzuzufügen.

Update 8. Februar 2013
Dies funktioniert jetzt nicht mehr in Twitter Bootstrap v. 2.3.0 - die modal-openKlasse wird nicht mehr zum Body hinzugefügt .

Eine Problemumgehung besteht darin, die Klasse dem Body hinzuzufügen, wenn das Modal angezeigt werden soll, und sie zu entfernen, wenn das Modal geschlossen wird:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Update 11. März 2013 Es sieht so aus, als würde die modal-openKlasse in Bootstrap 3.0 zurückkehren, explizit um das Scrollen zu verhindern:

Führt .modal-open am Körper wieder ein (damit wir die Schriftrolle dort nuklearisieren können)

Siehe hierzu: https://github.com/twitter/bootstrap/pull/6342 - siehe Abschnitt Modal .

— MartinHN
quelle
2
Dies funktioniert in Bootstrap 2.2.2 nicht mehr. Hoffentlich kommt .modal-open in Zukunft wieder ... github.com/twitter/bootstrap/issues/5719
— ppetrid
2
@ppetrid Ich erwarte nicht, dass es zurückkommt. Basierend auf diesem Schreiben: github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (siehe unten). Zitat: "Kein inneres Modal-Scrollen mehr. Stattdessen wachsen Modals, um ihren Inhalt aufzunehmen, und der Seiten-Scroll, um das Modal aufzunehmen."
— MartinHN
2
@Bagata Cool - das modal-openwird in Bootstrap 3 zurückgegeben. Wenn das gestartet wird, sollte es sicher sein, den obigen Code zu entfernen.
— MartinHN
2
Aus diesem Grund sollte man weiter nach unten scrollen. Wenn die gewählte Antwort Sie nicht zufriedenstellt, besteht die Möglichkeit, dass Sie solche Edelsteine ​​finden. Ich habe nicht erwartet, dass eine Antwort mit mehr als 97 Stimmen unter anderen weniger beliebten Kommentaren so tief vergraben ist.
— Mohd Abdul Mujib
2
Das Problem dabei ist, dass Sie body.modal-open {overflow: sichtbar} hinzufügen müssen, um zu verhindern, dass das Dokument beim Öffnen eines Modals nach oben rollt. Ihre Lösung funktioniert im Moment, mit dem Nachteile , dass das Dokument scrollt nach oben einmal modal openen ist
— patrick
120

Die akzeptierte Antwort funktioniert auf Mobilgeräten nicht (zumindest iOS 7 mit Safari 7) und ich möchte nicht, dass MOAR JavaScript auf meiner Website ausgeführt wird, wenn CSS dies tut.

Dieses CSS verhindert, dass die Hintergrundseite unter dem Modal gescrollt wird:

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

Es hat jedoch auch einen leichten Nebeneffekt, wenn im Wesentlichen nach oben gescrollt wird. position:absolutebehebt dieses Problem, führt jedoch die Möglichkeit zum Scrollen auf Mobilgeräten wieder ein.

Wenn Sie Ihr Ansichtsfenster kennen ( mein Plugin zum Hinzufügen des Ansichtsfensters zum<body> ), können Sie einfach einen CSS-Schalter für das hinzufügen 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; 
}

Ich füge dies auch hinzu, um zu verhindern, dass die zugrunde liegende Seite beim Ein- / Ausblenden von Modalen nach links / rechts springt.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

Diese Antwort ist ein X-Post.

— Brad
quelle
7
Vielen Dank! Handys (zumindest iOS und Android native Browser) bereiteten mir Kopfschmerzen und würden ohne den position: fixedam Körper nicht funktionieren .
— Raul Rene
Vielen Dank, dass Sie auch den Code hinzugefügt haben, der verhindert, dass die Seite beim Ein- / Ausblenden von Modalitäten nach links / rechts springt. Dies war äußerst nützlich und ich habe überprüft, ob es ein Problem behebt, das ich auf Safari auf einem iPhone 5c mit iOS 9.2.1 hatte.
— Elijah Lofgren
6
Um das Scrollen nach oben zu korrigieren, können Sie die Position aufzeichnen, bevor Sie die Klasse hinzufügen. Nachdem die Klasse entfernt wurde, führen Sie window.scroll zur aufgezeichneten Position aus. So habe ich es für mich selbst behoben: pastebin.com/Vpsz07zd .
— Tool
Obwohl ich der Meinung bin, dass dies nur sehr grundlegende Bedürfnisse erfüllen würde, war es eine nützliche Lösung. Vielen Dank.
— Steve Benner
32

Verstecken Sie einfach den Körperüberlauf und der Körper rollt nicht. Wenn Sie das Modal ausblenden, setzen Sie es auf automatisch zurück.

Hier ist der Code:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
— Mehmet Fatih Yıldız
quelle
Ausgezeichnet! Das hat mir geholfen. Vielen Dank.
— Pfcodes
21

Sie können versuchen, die Körpergröße auf die Fenstergröße mit Überlauf einzustellen: Wird ausgeblendet, wenn Modal geöffnet ist

— charlietfl
quelle
12
dies würde den Bildschirm jedes Mal bewegen, wenn das Modal geöffnet wird, was nicht praktisch ist. Ich muss nur die Hintergrundrolle deaktivieren
— xorinzor
— Ich bin
Sie könnten Modal auf "fest" setzen, damit es sich beim Scrollen nicht bewegt
— charlietfl
8
Es geht nicht darum, das Scrollen des
— Modals zu
1
Es ist das Fenster, das rollt, wenn der Körper es überläuft. Beispielsweise sind die Bildlaufleisten nicht Teil des Dokuments.
— charlietfl
18

Sie müssen über die Antwort von @ charlietfl hinausgehen und Bildlaufleisten berücksichtigen, da sonst möglicherweise ein Dokument-Reflow angezeigt wird.

Öffnen des Modals:

  1. Notieren Sie die bodyBreite
  2. Set bodyÜberlaufhidden

  3. Stellen Sie die Körperbreite explizit auf den Wert in Schritt 1 ein.

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

Modal schließen:

  1. Set bodyÜberlaufauto

  2. Stellen Sie die bodyBreite auf einauto

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

Inspiriert von: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

— jpap
quelle
Ich bekam einen "nervösen" Bildschirm, weil ich keinen besseren Begriff hatte, und der Schlüssel hier für mich war, den Breiteneinstellungen zu folgen. Danke vielmals.
— Hcabnettek
1
@Hcabnettek Yep: "jumpy" == "document reflow". Ich bin froh, dass es dir geholfen hat! :-)
— jpap
Gibt es dafür eine CSS-Lösung? funktioniert es in allen Browsern und Handys?
— Ruben
nur ein Tippfehler: Es muss $body.css("overflow", "auto");im letzten Schritt sein :)
— schneikai
Oh Mann, was für eine wunderbare Idee. @jpap Sie haben mir geholfen, das Problem mit dem Dokument-Reflow zu beheben, das mich lange Zeit nervte.
— Goran Radulovic
17

Warnung: Die folgende Option ist für Bootstrap v3.0.x nicht relevant, da das Scrollen in diesen Versionen explizit auf das Modal selbst beschränkt war. Wenn Sie Radereignisse deaktivieren, können Sie versehentlich verhindern, dass einige Benutzer den Inhalt in Modalen anzeigen, deren Höhe größer als die Höhe des Ansichtsfensters ist.

Noch eine Option: Radereignisse

Das Bildlaufereignis kann nicht abgebrochen werden. Es ist jedoch möglich, das Mausrad und das Rad zu entfernen Ereignisse. Die große Einschränkung ist, dass nicht alle älteren Browser sie unterstützen. Mozilla hat erst kürzlich in Gecko 17.0 Unterstützung für letztere hinzugefügt. Ich kenne die vollständige Verbreitung nicht, aber IE6 + und Chrome unterstützen sie.

So nutzen Sie sie:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

— merv
quelle
Ihre JSFiddle funktioniert weder unter Firefox 24, Chrome 24 noch unter IE9.
— AxeEffect
@AxeEffect sollte jetzt funktionieren. Das einzige Problem war, dass sich die externen Verweise auf die Bootstrap-Bibliothek geändert hatten. Danke für die Warnung.
— Merv
2
Dies verhindert nicht, dass Touch-Geräte scrollen. Dies ist vorerst overflow:hiddenbesser.
— Webinan
5
Sie funktionieren alle, aber nicht für mobile Geräte. -__- Getestet Android 4.1 und Chrome
— Tower Jimmy
@ TowerJimmy Sie müssen wahrscheinlich die Touch- oder Drag-Ereignisse dafür abbrechen (wenn das überhaupt möglich ist)
— 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
quelle
9

In Chrome konnte es nicht funktionieren, wenn nur CSS geändert wurde, da ich nicht wollte, dass die Seite wieder nach oben rollt. Das hat gut funktioniert:

$("#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
quelle
1
Dies ist die einzige Lösung, die für mich unter Bootstrap 3.2 funktioniert hat.
— Volx757
1
Hatte den Sprung nach oben Problem mit eckigen Material-Seitenavs. Dies war die einzige Antwort, die in allen Fällen zu funktionieren scheint (Desktop / Mobile + Scrollen im Modal / Sidenav zulassen + Körper-Scroll-Position unverändert lassen, ohne zu springen).
— cYrixmorten
Dies ist auch nur eine Lösung, die tatsächlich für mich funktioniert hat. tx
— Deedz
arbeitete für mich, Bootstrap v4
— Deano
9

Probier diese:

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

es hat bei mir funktioniert. (unterstützt IE8)

— fatCop
quelle
4
Dies funktioniert, führt aber auch dazu, dass Sie beim Öffnen eines Modals nach oben springen, wenn Sie es verwenden position: fixed.
— AlexioVay
8

Für Bootstrap , können Sie versuchen , diese (Arbeit an Firefox, Chromeund Microsoft Edge):

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

Hoffe das hilft...

— Murat Yıldız
quelle
7

Das Hinzufügen der Klasse 'is-modal-open' oder das Ändern des Stils des Body-Tags mit Javascript ist in Ordnung und funktioniert wie vorgesehen. Das Problem, dem wir uns stellen müssen, ist, wenn der Körper überläuft: Versteckt springt er nach oben (scrollTop wird 0). Dies wird später zu einem Usability-Problem.

Als Lösung für dieses Problem, anstatt den Überlauf von Body-Tags zu ändern: Versteckte Änderung auf HTML-Tag

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});
— Jassim Abdul Latheef
quelle
1
Dies ist absolut die richtige Antwort, da die allgemeine Konsensantwort die Seite nach oben rollt, was eine schreckliche Benutzererfahrung darstellt. Sie sollten einen Blog darüber schreiben. Am Ende habe ich daraus eine globale Lösung gemacht.
— Smith
Dies funktioniert nicht auf dem iPhone.
— BadriNarayanan Sridharan
6

Ich bin mir bei diesem Code nicht sicher, aber es ist einen Versuch wert.

In jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

Wie ich bereits sagte, bin ich mir nicht 100% sicher, aber versuche es trotzdem.

— Anish Gupta
quelle
1
Dies hindert den Körper nicht daran zu scrollen, während das Modal geöffnet ist
— Xorinzor
@xorinzor Sie haben im Kommentarbereich der Antwort von charlietfl angegeben, dass dies funktioniert. Aber Sie sagten: Dies hindert den Körper nicht daran, zu scrollen, während das Modal geöffnet ist.
— Anish Gupta
stimmt, aber im Moment ist es die einzige Lösung, die teilweise funktioniert und mit der ich einverstanden bin. Der Grund, warum ich seine Antwort als Antwort markiert habe, ist, dass er früher mit der Antwort war.
— Xorinzor
@xorinzor wirklich, ich dachte, ich antwortete vor ihm / ihr, könnte eine seltsame Panne sein. Es ist in Ordnung
— Anish Gupta
4

Die beste Lösung ist die reine CSS- body{overflow:hidden}Lösung, die von den meisten dieser Antworten verwendet wird. Einige Antworten bieten eine Korrektur, die auch den "Sprung" verhindert, der durch die verschwindende Bildlaufleiste verursacht wird. Keiner war jedoch zu elegant. Also habe ich diese beiden Funktionen geschrieben und sie scheinen ziemlich gut zu funktionieren.

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

Schauen Sie sich diese jsFiddle an, um zu sehen, wie sie verwendet wird.

— Stephen M. Harris
quelle
Das ist nicht so alt, aber nichts davon funktioniert für mich überhaupt nicht einmal die Geige, die ich noch im Fenster scrollen kann, was fehlt mir?
— landete am
Öffnen und schließen Sie das Modal einige Male und der grüne Haupt-DIV schrumpft und schrumpft!
— Webinan
@Webinan Ich sehe dies nicht in Chrome unter Win7. Wie groß ist Ihr Browser und Ihr Ansichtsfenster?
— Stephen M. Harris
1
@smhmic nach etwa 20-maligem Öffnen und Schließen wird die Breite des grünen Div gleich der Breite der open modalSchaltflächen. Chrome am 8
— Webinan
Ähnlich wie die Antwort von @ jpap ( stackoverflow.com/a/16451821/5516499 ), jedoch mit zusätzlichen Fehlern. :-(
— Kivi Shapiro
4

Viele schlagen "Überlauf: versteckt" am Körper vor, was nicht funktioniert (zumindest in meinem Fall nicht), da dadurch die Website nach oben scrollen kann.

Dies ist die Lösung, die für mich (sowohl auf Mobiltelefonen als auch auf Computern) mit jQuery funktioniert:

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

Dadurch funktioniert das Scrollen des Modals und die Website kann nicht gleichzeitig scrollen.

— Danie
quelle
Diese Lösung behebt anscheinend auch
— Gotenks
3

Sie könnten die folgende Logik verwenden, ich habe es getestet und es funktioniert (sogar im 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
quelle
2

Ich bin nicht 100% sicher, dass dies mit Bootstrap funktioniert, aber einen Versuch wert - es hat mit Remodal.js funktioniert, das auf github zu finden ist: http://vodkabears.github.io/remodal/ und es wäre für die Methoden sinnvoll ziemlich ähnlich sein.

Um zu verhindern, dass die Seite nach oben springt, und um zu verhindern, dass der Inhalt nach rechts verschoben wird, fügen Sie beim Auslösen des Modals eine Klasse hinzu bodyund legen Sie die folgenden CSS-Regeln fest:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

Es ist das position:staticund das height:auto, die zusammen das Springen von Inhalten nach rechts stoppen. Das verhindert, dass overflow-y:hidden;die Seite hinter dem Modal gescrollt werden kann.

— AdamJB
quelle
Diese Lösung funktioniert perfekt für mich in Safari 11.1.1, Chrome 67.0.3396.99 und Firefox 60.0.2. Vielen Dank!
— Dom
2

Basierend auf dieser Geige: http://jsfiddle.net/dh834zgw/1/

Das folgende Snippet (mit jquery) deaktiviert den Fensterlauf:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

Und in Ihrem CSS:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Vergessen Sie beim Entfernen des Modals nicht, die Noscroll-Klasse im HTML-Tag zu entfernen:

$('html').toggleClass('noscroll');
— Leng
quelle
Sollte das overflownicht eingestellt sein hidden? +1 obwohl das bei mir funktioniert hat (mit hidden).
— Mhulse
2

Ich hatte eine Seitenleiste, die durch Checkbox-Hack generiert wurde. Die Hauptidee ist jedoch, das Dokument scrollTop zu speichern und es während des Bildlaufs im Fenster nicht zu ändern.

Ich mochte das Springen der Seite einfach nicht, wenn der Körper "Überlauf: versteckt" wird.

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

});
Erweitern Sie das Snippet

— Lozhachevskaya Anastasiya
quelle
2

Leider hat keine der obigen Antworten meine Probleme behoben.

In meiner Situation hat die Webseite ursprünglich eine Bildlaufleiste. Immer wenn ich auf das Modal klicke, verschwindet die Bildlaufleiste nicht und die Kopfzeile bewegt sich etwas nach rechts.

Dann habe ich versucht hinzuzufügen .modal-open{overflow:auto;}(was die meisten Leute empfohlen haben). Es hat tatsächlich die Probleme behoben: Die Bildlaufleiste wird angezeigt, nachdem ich das Modal geöffnet habe. Ein weiterer Nebeneffekt ist jedoch, dass "der Hintergrund unter dem Header zusammen mit einem weiteren langen Balken hinter dem Modal etwas nach links verschoben wird".

Langer Balken hinter Modal

Zum Glück ist, nachdem ich hinzugefügt habe {padding-right: 0 !important;}, alles perfekt repariert. Sowohl der Header- als auch der Body-Hintergrund haben sich nicht bewegt, und das Modal behält weiterhin die Bildlaufleiste bei.

Festes Bild

Hoffe, dies kann denen helfen, die immer noch mit diesem Problem stecken. Viel Glück!

— Bocard Wang
quelle
1

Die meisten Stücke sind hier, aber ich sehe keine Antwort, die alles zusammenfügt.

Das Problem ist dreifach.

(1) Verhindern Sie das Scrollen der zugrunde liegenden Seite

$('body').css('overflow', 'hidden')

(2) und entfernen Sie die Bildlaufleiste

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3) Aufräumen, wenn das Modal entlassen wird

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

Wenn das Modal nicht im Vollbildmodus angezeigt wird, wenden Sie die .modal-Bindungen auf eine Vollbild-Überlagerung an.

— evoskuil
quelle
4
Dies verhindert auch das Scrollen innerhalb des Modals.
— Daniel
Gleiches Problem. Haben Sie eine Lösung gefunden? @ Daniel
— AlexioVay
@Vay Art von. Überprüfen Sie dies heraus: blog.christoffer.me/…
— Daniel
1

Meine Lösung für Bootstrap 3:

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

denn für mich hat der einzige overflow: hiddenin der body.modal-openKlasse nicht verhindert, dass sich die Seite aufgrund des Originals nach links verschiebt margin-right: 15px.

— pierrea
quelle
1

Ich habe es einfach so gemacht ...

$('body').css('overflow', 'hidden');

Aber als der Scroller verschwand, bewegte er alles richtig 20px, also fügte ich hinzu 

$('body').css('margin-right', '20px');

gleich danach.

Funktioniert bei mir.

— Cliff
quelle
Dies funktioniert nur, wenn das Modal kleiner als die Bildschirmgröße ist.
— Sergey
1

Wenn Modal 100% Höhe / Breite sind, funktioniert "mouseenter / Leave", um das Scrollen einfach zu aktivieren / deaktivieren. Das hat für mich wirklich geklappt:

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); 
});
— Matten
quelle
1

arbeitete für mich

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

Warum nicht so wie Bulma? Wenn modal aktiv ist, fügen Sie zu HTML ihre Klasse .is-clipped hinzu, die überläuft: versteckt! Wichtig; Und das ist es.

Edit: Okey, Bulma hat diesen Fehler, also musst du auch andere Dinge wie hinzufügen

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}
— nrkz
quelle
1

Da dieses Problem für mich hauptsächlich unter iOS auftritt, stelle ich den Code zur Verfügung, um dies nur unter iOS zu beheben:

  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;
    });
  }
— LowFieldTheory
quelle
1

Keine der oben genannten Antworten hat bei mir perfekt funktioniert. Also habe ich einen anderen Weg gefunden, der gut funktioniert.

Fügen Sie einfach einen scroll.(namespace)Listener hinzu und setzen Sie scrollTopdendocument auf den neuesten Wert es ist ...

und entfernen Sie auch den Listener in Ihrem Close-Skript.

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

});

aktualisieren

Anscheinend funktioniert dies auf Chrom nicht gut. Irgendwelche Vorschläge, um das Problem zu beheben?

— Pars
quelle
0

Das hat bei mir funktioniert:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});
— Gerhard Liebenberg
quelle
0

Für diejenigen, die sich fragen, wie sie das Scroll-Ereignis für das Bootstrap 3-Modal erhalten können:

$(".modal").scroll(function() {
    console.log("scrolling!);
});
— Arie
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.