Ich möchte eine modale Ebene öffnen, die die Körperrolle überholt. Um das zu erreichen, wenn der Layer angezeigt wird, setze ich den Body-Overflow auf versteckt und den Überlauf auf den Modal-Layer. Visuell ersetzt eine Bildlaufleiste die andere.
Im Hintergrund habe ich eine obere Leiste mit fester Position und 100% Breite. Was passiert, wenn der Body-Überlauf auf "Versteckt" eingestellt ist, nimmt das div-Element mit 100% Breite (obere Leiste) den Scrollbalken-Bereich ein und die Elemente bewegen sich nach rechts.
Wie kann ich verhindern, dass sich diese Elemente verschieben?
Ich habe versucht (Javascript) die Breite der Bildlaufleiste zu berechnen und beim Setzen des Körperüberlaufs: ausgeblendet, geben Sie einen Rand rechts: "Bildlaufleiste Breite" zum oberen Balken. Das hat nicht funktioniert.
Probieren Sie auch ein Dummy-Div am rechten Ende der oberen Leiste aus, bei dem der Überlauf aktiviert ist, und scrollen Sie zum Anzeigen einer Bildlaufleiste, wenn die Ebene geöffnet wird. Die Idee war, den Platz der fehlenden Bildlaufleiste mit einer anderen Bildlaufleiste einzunehmen, nur auf dem obersten Container. Das hat fast funktioniert, aber ein 1 oder 2px Flackern erzeugt. Nicht gut genug.
%Vor%Grundsätzlich ...
Wenn das Modal geöffnet wird , legen Sie die Menübreite auf die aktuelle Breite fest und legen Sie einen window.onresize -Ereignishandler fest, der die Größe des Menüs auf die Körperbreite ändert.
Wenn das Modal geschlossen ist , entferne die feste Breite und den window.onresize -Handler und bringe das Menü in den Ausgangszustand zurück.
Im Geiste von less === more habe ich mir die Freiheit genommen, Ihren Code so weit wie möglich zu vereinfachen.
Ihr Problem hier ist, dass topBarFixed eine 100% width hat. Wenn diese Breite behoben wäre, hätten Sie dieses Problem nicht. Folgendes wurde in Chrome und Firefox getestet:
Fügen Sie diese Zeile der ersten Zeile Ihrer toggleModal-Funktion hinzu:
$(".topBarFixed").width($(".topBarFixed").width());
Damit wird die Breite auf die tatsächliche Breite (in Pixeln) des Balkens an diesem Punkt eingestellt. Wenn Sie die Ebene schließen, stellen Sie sie auf 100% zurück.
Der gesamte Code sieht folgendermaßen aus:
%Vor%Und hier ist das jsFiddle: Ссылка
Bearbeiten
Optional können Sie auch eine feste Breite eingeben, und das wird den Trick machen:
%Vor% Einige Fehler in Ihrem Code: id ist nur einer. Verwenden Sie Klassen, wenn Sie denselben Stil auf mehrere Elemente anwenden möchten.
Wie auch immer, das hat Ihr Problem nicht verursacht. Zuallererst sollte der Überlauf Ihres Körpers ausreichen: Fügen Sie keinen% overflowY zu Ihrem .modal-container hinzu, es sei denn, Sie möchten verhindern, dass die Hintergrundseite scrollt, während Modal geöffnet ist. Zweitens, fixiere das Modal selbst und zentriere es mit dem zentrierten CSS-Trick (links: 50%, Rand links: -halb deiner Breite).
CSS:
.body-locked {
Überlauf: scrollen;
}
Ich hoffe, es hilft.
Tags und Links javascript html css css3