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:scroll
und 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?
css
twitter-bootstrap
scroll
user798204
quelle
quelle
body {overflow-y:scroll}
und durch zu ersetzenhtml {overflow: scroll;}
. Dies hat das Problem für uns behoben.Antworten:
Ändern Sie in Bootstrap.css das Hintergrundattribut (
position
) von Modal vonfixed
nachabsolute
quelle
<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.$.support.transition = false
stattdessen.modal {overflow-y: scroll}
In Bootstrap 3 müssen Sie die
css
Klasse ändern.modal
vorher (Bootstrap-Standard):
.modal { overflow-y: auto; }
nach (nachdem Sie es bearbeitet haben):
.modal { overflow-y: scroll; }
quelle
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
.modal
und.modal-body
den 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.
quelle
list-group
dass der Benutzer eine von 10 Optionen auswählen kann, die auf einem Mobiltelefon im Querformat angezeigt werden. Eine schönere Lösung wäre dasmodal-content
Scrollen, obwohl ich keine universelle Lösung gesehen habe, die auf allen Geräten gut funktioniert.Stellen Sie die Höhe für
modal-body
und 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.
quelle
height: auto;
funktioniert auch, aber die Modalhöhe ist ohnehin auf Auto eingestellt, sodass Sie wirklich nur die benötigenoverflow-y: auto;
. Ich habe es auch auf das angewendet,.modal
anstatt ein bestimmtes auszuwählen. Umfangreiche Tests zeigen, dass es bisher bei jedem Modal funktioniert hat.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.
quelle
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.
quelle
Less CSS
nicht reinCSS
.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
quelle
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;*/ }
quelle
Ich habe dieses Problem in Mobile Safari auf meinem iPhone6
Bootstrap fügt die Klasse
.modal-open
dem 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
quelle
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.
quelle
.modal-body { max-height: 80vh; overflow-y: scroll; }
es funktioniert bei mir
quelle
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.
quelle
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; }
quelle
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
quelle
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-open
Klasse hinzubody
, um Bildlaufleisten zu entfernen, falls modal angezeigt wird, fügt jedoch keine Klasse hinzu, zuhtml
der auch Bildlaufleisten vorhanden sein können. Daherhtml
kann manchmal auch die Bildlaufleiste von sichtbar sein. Um sie zu entfernen, müssen Sie modal show / festlegen hide Veranstaltungen und hinzufügen / entfernenoverflow:hidden
aufhtml
. 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
body
undhtml
Bildlaufleisten.Anmerkung 1 : Browser Unterstützung für
vh
Einheiten.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.quelle