Verhindern Sie das Scrollen von Seiten, wenn ein Modal geöffnet ist

Verhindern

Sind Sie jemals auf diese Situation gestoßen: Öffnen Sie eine Modalbox, scrollen Sie darin, schließen Sie sie und die Seite springt zu einem anderen Ort?

Dies liegt daran, dass das Modal -Feld nur ein Element auf der Seite ist, es kann an Ort und Stelle bleiben, aber der Rest der Seite funktioniert immer noch ordnungsgemäß.

Manchmal spielt dies keine Rolle, z. B. wenn die Bildschirmhöhe genau der Ansichtsfensterhöhe entspricht. In anderen Fällen tritt jedoch ein Bildlaufproblem auf. Die gute Nachricht ist, dass wir dies mit einigen CSS- (und JavaScript) -Tricks verhindern können.

Beginnen Sie mit einer einfachen Lösung

Wir können das Problem des Seitenscrollens erheblich reduzieren, wenn das Modalbox geöffnet wird, indem die Höhe des gesamten Körpers auf die vollständige Ansichtsfensterhöhe und den vertikalen Überlauf eingestellt wird, wenn das Modalbox geöffnet wird:

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

Dies ist gut, aber wenn wir vor dem Öffnen der Modalbox durch die Seitenelemente gescrollt haben, wird es eine leichte horizontale Umlagerung geben. Die Ansichtsfensterbreite nimmt um etwa 15 Pixel zu, was genau die Breite der Scrollbar ist. Passen wir die rechte Körpersfüllung ein wenig an, um dies zu vermeiden.

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免宽度重排*/ }</code>

Beachten Sie, dass die Höhe des Modalbox weniger als die Ansichtsfensterhöhe für diese Methode sein muss. Andernfalls ist die Bildlaufleiste am Körper erforderlich.

Was tun auf dem Handy?

Diese Lösung funktioniert sowohl auf Desktop als auch auf Android Mobile gut. IOS Safari benötigt jedoch mehr Verarbeitung, da der Körper beim Klicken und Bewegen auf dem Touchscreen immer noch scrollt, wenn sich das Modalfeld öffnet.

Wir können den Körper als Lösung auf die feste Positionierung einstellen:

 <code>body { position: fixed; }</code>

Es ist jetzt in Ordnung! Bei der Berührung des Bildschirms reagiert der Körper nicht. Hier gibt es jedoch immer noch ein "kleines" Problem. Unter der Annahme, dass der Auslöser des Modal -Box am Ende der Seite steht, klicken wir, um ihn zu öffnen. sehr gut! Aber jetzt scrollen wir automatisch nach oben auf dem Bildschirm, was genauso verwirrend ist wie das Scrolling -Verhalten, das wir lösen wollen.

Hoppla!

Wir müssen also JavaScript verwenden

Wir können JavaScript verwenden, um die Blase von Touch -Ereignissen zu vermeiden. Wir alle wissen, dass es eine Hintergrundschicht geben sollte, wenn die Modalbox geöffnet wird. Leider ist StopPropagation in iOS etwas umständlich, um mit Touch -Events zu arbeiten. Aber PreventDefault funktioniert sehr gut. Dies bedeutet, dass wir Ereignishörern zu jedem im Modal -Box enthaltenen DOM -Knoten hinzufügen müssen - nicht nur auf der Hintergrund- oder Modal -Box -Ebene. Die gute Nachricht ist, dass viele JavaScript -Bibliotheken dies tun können, einschließlich der bewährten JQuery.

Noch etwas: Was ist, wenn wir in die Modalbox scrollen müssen? Wir müssen immer noch die Reaktion auf das Touch -Ereignis auslösen, aber wir müssen das Blasen immer noch stoppen, wenn es die obere oder untere Unterseite der Modalbox erreicht. Dies scheint sehr kompliziert zu sein, deshalb haben wir das Problem nicht vollständig gelöst.

Verbesserte feste Körpermethode

Was wir verwenden, ist:

 <code>body { position: fixed; }</code>

Wenn wir die oberste Scrollenposition kennen und zu unserem CSS hinzufügen, scrollt der Körper nicht zurück zum Oberteil des Bildschirms, sodass das Problem gelöst wird. Wir können JavaScript verwenden, um das Scroll -Top zu berechnen und diesen Wert zum Körperstil hinzuzufügen:

 // Wenn das Modalbox angezeigt wird, benötigen wir einen festen Körper
document.body.style.position = 'behoben';
document.body.style.top = `-$ {window.scrolly} px`;

// Wenn die Modalbox versteckt ist, müssen wir sie oben im Scroll -Positionsdokument.
document.body.style.top = '';

Dies funktioniert, aber es gibt immer noch ein wenig Leck, nachdem die Modalbox geschlossen wurde. Insbesondere wenn das Modalbox geöffnet ist und der Körper auf fest gesetzt ist, scheint die Seite seine Bildlaufposition verloren zu haben. Also müssen wir den Ort abrufen. Ändern wir unser JavaScript, um dieses Problem zu lösen.

 // Wenn die Modalbox versteckt ist ...
const Scrolly = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollto (0, parseInt (scrolly || '0') * -1);

geschafft! Der Körper scrollt nicht mehr, wenn die Modalbox geöffnet ist und bleibt in der Bildlaufposition, wenn die Modalbox geöffnet und geschlossen ist. Es lebe!

Das obige ist der detaillierte Inhalt vonVerhindern Sie das Scrollen von Seiten, wenn ein Modal geöffnet ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!