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!