Wie aktiviere ich das Scrollen von Inhalten innerhalb eines Modals?

75

Ich versuche, viel Text in eine mit Twitter Bootstrap erstellte modale Box einzufügen, aber ich habe ein Problem: Dieser Inhalt weigert sich zu scrollen.

Ich habe versucht, overflow:scrollund hinzuzufügen overflow-y:scroll, aber ohne Erfolg; Dadurch wird lediglich eine Bildlaufleiste angezeigt, ohne dass das Scrollen aktiviert ist.

Was ist die Ursache dahinter und was kann ich tun?

user798204
quelle
2
Ein Kollege schlug freundlicherweise vor, es zu suchen body {overflow-y:scroll}und durch zu ersetzen html {overflow: scroll;}. Dies hat das Problem für uns behoben.
Lorenz Lo Sauer

Antworten:

63

Ändern Sie in Bootstrap.css das Hintergrundattribut ( position) von Modal von fixednachabsolute

jktress
quelle
@jktress Ich verstehe Rasmus 'Kommentar, aber nicht deine Antwort. "Hintergrundattribut"? Sicherlich meinst du nicht, <div background="absolute" ich nehme an, du meinst Stil, aber selbst dann gibt es keinen "festen" Wert für den Hintergrundstil, der { background-position:fixed }nicht gültig ist.
AaronLS
3
Dies führt tatsächlich dazu, dass der modale Inhalt für mich abgeschnitten wird. Wenn Sie $.support.transition = falsestattdessen
einstellen,
4
Dies ist keine global nützliche Lösung. versuchen.modal {overflow-y: scroll}
Farzad YZ
Diese Lösung ist ein Problem, wenn auf Ihrer Seite gescrollt wird. Das Modal kann mit absoluter Positionierung außer Sicht sein
Timothy Gonzalez
46

In Bootstrap 3 müssen Sie die cssKlasse ändern.modal

vorher (Bootstrap-Standard):

.modal {

    overflow-y: auto;
}

nach (nachdem Sie es bearbeitet haben):

.modal {

    overflow-y: scroll;
}
Philipp Wirth
quelle
1
Sie sind ganz anders. Der erste verwendet den Auto-Wert, der zweite den Scroll-Wert. Dies hat für mich das Problem behoben.
Philipp Wirth
1
"Vorher" bedeutet, welche CSS die .modal-Klasse vor dem Bearbeiten hatte ... Der Abschnitt "Nachher" zeigt die richtige Methode zum Überschreiben der .modal-Klasse.
Philipp Wirth
18

Diese Antwort besteht aus zwei Teilen, einer UX-Warnung und einer tatsächlichen Lösung .

UX-Warnung

Wenn Ihr Modal so viel enthält, dass es scrollen muss, fragen Sie sich, ob Sie überhaupt ein Modal verwenden sollten. Die Größe des Bootstrap-Modals ist standardmäßig eine ziemlich gute Einschränkung dafür, wie viele visuelle Informationen passen sollten. Je nachdem, was Sie erstellen, möchten Sie möglicherweise stattdessen eine neue Seite oder einen Assistenten auswählen.

Tatsächliche Lösung

Ist hier: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

Mit dieser Lösung können Sie auch die Höhe von ändern .modalund .modal-bodyden verbleibenden Platz bei Bedarf mit einer vertikalen Bildlaufleiste einnehmen.

AKTUALISIEREN

Beachten Sie, dass in Bootstrap 3 das Modal überarbeitet wurde, um überlaufende Inhalte besser verarbeiten zu können. Sie können das Modal selbst nach oben und unten scrollen, während es unter dem Ansichtsfenster fließt.

Adam Grant
quelle
Ich habe das gleiche Problem, und dies funktioniert auf Mobilgeräten nicht, da es auf einer Pixelhöhe beruht.
Wayne Smallman
hmm .. schwer zu testen, da die verknüpfte Geige überhaupt keinen Bootstrap verwendet ... dies mag einige der Prinzipien bei der Arbeit erklären, aber die Bootstrap-Quelle ist so kompliziert, dass ich es nicht so nützlich finde, ohne das anzuwenden Grundsätze für das standardmäßige BS-Markup.
ptim
Dies mag für die neueste Version von Bootstrap veraltet sein, aber im Fall der von mir bereitgestellten Geige ist Bootstrap nur der Code, der dies umgeht. Sie sollten nichts im Bootstrap selbst ändern müssen, nur das Element, das es enthält den Inhalt, den Sie scrollen möchten.
Adam Grant
Ich könnte argumentieren, dass das Scrolling-Modal eine UX-Design-Warnung ist. Stellen Sie sich ein einfaches Modal vor, das anzeigt, list-groupdass der Benutzer eine von 10 Optionen auswählen kann, die auf einem Mobiltelefon im Querformat angezeigt werden. Eine schönere Lösung wäre das modal-contentScrollen, obwohl ich keine universelle Lösung gesehen habe, die auf allen Geräten gut funktioniert.
Brett Ryan
6

Stellen Sie die Höhe für modal-bodyund nicht für das gesamte Modal ein, um einen perfekten Bildlauf bei der Modalüberlagerung zu erhalten. Ich bekomme es so funktionieren:

.MyModal {
    height: 450px;
    overflow-y: auto;
}

Hier können Sie die Höhe nach Ihren Wünschen einstellen.

Ravindra
quelle
2
Endlich eine Lösung! Ein Hinweis für dynamische Modalitäten height: auto;funktioniert auch, aber die Modalhöhe ist ohnehin auf Auto eingestellt, sodass Sie wirklich nur die benötigen overflow-y: auto;. Ich habe es auch auf das angewendet, .modalanstatt ein bestimmtes auszuwählen. Umfangreiche Tests zeigen, dass es bisher bei jedem Modal funktioniert hat.
Rockster160
4

Wenn ich mich richtig erinnere, funktionierte das Einstellen des Überlaufs: Versteckt auf dem Körper nicht in allen Browsern, die ich für eine modale Bibliothek getestet habe, die ich für eine mobile Site erstellt habe. Insbesondere hatte ich Probleme, das Scrollen des Körpers zusätzlich zum modalen Scrollen zu verhindern, selbst wenn ich einen Überlauf: versteckt auf dem Körper platzierte.

Für meine aktuelle Site habe ich so etwas gemacht. Grundsätzlich wird nur Ihre aktuelle Bildlaufposition gespeichert und "Überlauf" im Seitenkörper auf "ausgeblendet" gesetzt. Anschließend wird die Bildlaufposition nach dem Schließen des Modals wiederhergestellt. Es gibt eine Bedingung, wenn ein anderes Bootstrap-Modal geöffnet wird, während eines bereits aktiv ist. Andernfalls sollte der Rest des Codes selbsterklärend sein. Beachten Sie, dass, wenn der auf dem Körper verborgene Überlauf das Fenster nicht daran hindert, für einen bestimmten Browser zu scrollen, dies zumindest die ursprüngliche Bildlaufposition beim Beenden zurücksetzt.

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

Wenn Ihnen dies nicht gefällt, besteht die andere Option darin, .modal-body eine maximale Höhe und einen Überlauf zuzuweisen: auto wie folgt:

.modal-body {
  max-height:300px;
  overflow:auto;
}

In diesem Fall können Sie die maximale Höhe für verschiedene Bildschirmgrößen konfigurieren und den Überlauf belassen: auto für verschiedene Bildschirmgrößen. Sie müssten jedoch sicherstellen, dass die modale Kopf- und Fußzeile sowie der Textkörper nicht mehr als die Bildschirmgröße ergeben, sodass ich diesen Teil in Ihre Berechnungen einbeziehen würde.

Daniel
quelle
2

So habe ich es nur mit CSS gemacht, das einige Klassen überschreibt:

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

Hoffe es hilft dir.

Alejandro García Iglesias
quelle
7
Bitte beachten Sie: Das obige ist eigentlich Less CSSnicht rein CSS.
Fizzix
2

Wenn Sie das Bootstrap-Modal mit skrollr verwenden, kann das Modal nicht mehr gescrollt werden.

Problem behoben, bei dem die Ausbreitung des Berührungsereignisses gestoppt wurde.

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

Weitere Details finden Sie unter Bildlaufereignis zum Element in # skrollr-body hinzufügen

Ken
quelle
1

Tatsächlich müssen Sie für Bootstrap 3 auch die .modal-open-Klasse für body überschreiben.

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
Jmorvan
quelle
1

Ich habe dieses Problem in Mobile Safari auf meinem iPhone6

Bootstrap fügt die Klasse .modal-opendem Body hinzu, wenn ein Modal geöffnet wird.

Ich habe versucht, Bootstrap 3.2.0 nur minimal zu überschreiben, und habe Folgendes gefunden:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

Zum Vergleich habe ich die zugehörigen Bootstrap-Stile unten aufgeführt.

Ausgewählter Auszug aus bootstrap / less / modals.less (nicht in Ihren Fix aufnehmen):

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Verwendete Mobile Safari-Version: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

ptim
quelle
1
gah :( dies führt tatsächlich dazu, dass der BG hart links bleibt, während das Modal geöffnet ist. Ich werde mit einem Fix aktualisieren, wenn es sortiert ist.
ptim
Ich konnte dieses Problem nicht mehr reproduzieren und habe diese Änderung
rückgängig gemacht
1

Ich hatte das gleiche Problem und fand eine Lösung wie folgt:

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% arbeiten.

Amin Bakhtiari Far
quelle
1
.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

es funktioniert bei mir

Ivan Komarov
quelle
0

Nachdem ich all diese erwähnten Lösungen verwendet hatte, war ich immer noch nicht in der Lage, mit der Maus zu scrollen. Die Tastatur-Auf / Ab-Taste funktionierte zum Scrollen von Inhalten.

Also habe ich unten CSS-Korrekturen hinzugefügt, damit es funktioniert

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Zeigerereignisse hinzugefügt : auto; um die Maus scrollbar zu machen.

Ritesh Kashyap
quelle
0

Ich konnte dies überwinden, indem ich die "vh" -Metrik mit maximaler Höhe für das .modal-body-Element verwendete. 70vh sah für meine Zwecke richtig aus.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
Keith.Abramo
quelle
0

Bootstrap fügt "modal-open"dem <body>Tag ein CSS hinzu oder entfernt es , wenn wir ein Modal öffnen oder schließen. Wenn Sie also mehrere Modals öffnen und dann einen beliebigen schließen, wird das Modal-Open-CSS aus dem Body-Tag entfernt.

Der Bildlaufeffekt hängt jedoch von dem in "overflow-y: auto;"definierten Attribut abmodal-open

Nick
quelle
-2

Lösung 1 : Sie können deklarieren .modal{ overflow-y:auto}oder .modal-open .modal{ overflow-y:auto}wenn Sie weniger als 3 V Bootstrap verwenden (für obere Versionen ist es bereits deklariert).

Bootstrap fügt eine modal-openKlasse hinzu body, um Bildlaufleisten zu entfernen, falls modal angezeigt wird, fügt jedoch keine Klasse hinzu, zu htmlder auch Bildlaufleisten vorhanden sein können. Daher htmlkann manchmal auch die Bildlaufleiste von sichtbar sein. Um sie zu entfernen, müssen Sie modal show / festlegen hide Veranstaltungen und hinzufügen / entfernen overflow:hidden auf html. Hier erfahren Sie, wie das geht.

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

Lösung 2 : Da Modal über Funktionstasten verfügt, können Sie die Höhe des Modals am besten festlegen oder die Höhe des Modals besser mit der Höhe des Ansichtsfensters wie folgt verbinden.

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

Bei dieser Methode müssen auch Sie nicht handhaben bodyund htmlBildlaufleisten.

Anmerkung 1 : Browser Unterstützung für vhEinheiten.

Anmerkung 2 : Wie oben vorgeschlagen . Wenn Sie ändern .modal{position:fixed}zu .modal{position:absolute}, aber im Fall Seite mehr Höhe hat als modal Benutzer zu viel scrollen und Modal wird aus Ansichtsfenster verschwinden, das ist gut , nicht für User Experience.

Gagik Sargsyan
quelle