Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite

Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite

Ein Problem, auf das Frontend-Entwickler häufig stoßen, ist das Erstellen eines Popup-Fensters, um Benutzern Informationen anzuzeigen. Wenn dieses Popup-Fenster angezeigt wird, wird es häufig von einer grauen Maskenebene begleitet, die den Seiteninhalt blockiert. Gleichzeitig wird die gesamte Seite von dieser Maske abgedeckt und kann nicht angeklickt oder gescrollt werden.

Geben Sie hier die Bildbeschreibung ein

Lösung 1: Überlauf kontrollieren und Scrollen verhindern (nicht mit iOS kompatibel)

Es ist ganz einfach, diesen Effekt auf dem PC zu erzeugen. Sie müssen lediglich die Höhe des HTML auf 100 % einstellen, um den Bildschirm auszufüllen, und den Überlauf des HTML auf „versteckt“ setzen, um sicherzustellen, dass die Seite nicht gescrollt werden kann.
Auf Mobilgeräten tritt das gleiche Problem jedoch anders auf. Das bloße Festlegen der oben genannten HTML-Attribute kann immer noch nicht verhindern, dass die Seite auf dem mobilen Endgerät über das Limit hinaus gescrollt wird. Wir müssen den folgenden Code festlegen, um das Scrollen der Seite zu verhindern, wenn das Popup-Fenster angezeigt wird:

html.style.overflow="versteckt";
html.style.height="100%";
body.style.overflow="versteckt";
Körper.Stil.Höhe="100%";

Der Grund dafür ist, dass das mobile Endgerät auf Berührungsereignissen basiert. Um das Scrollen basierend auf Berührungsereignissen zu verhindern, müssen wir auf der Grundlage des Scrollenverbots in HTML dem Inhalt, dessen Scrollen verhindert werden soll, ein umschließendes Blockelement hinzufügen und dann die Höhe dieses umschließenden Blockelements auf 100 % setzen und overflow:hidden; festlegen. Dann denken wir hier, dass body die gesamte Seite umschließt, was das Blockelement ist, das wir brauchen. Wenn wir es so einstellen, dass das Scrollen verhindert wird, können wir sicherstellen, dass die Gleitzeit der mobilen Seite kein Seitenscrollen auslöst.
Wenn der Benutzer das Popup-Fenster schließt, wird die Seite wieder normal angezeigt. Wir legen die folgenden CSS-Stileigenschaften fest, um den Scroll-Effekt der gesamten Seite wiederherzustellen:

html.style.overflow="sichtbar";
html.style.height="auto";
body.style.overflow="sichtbar";
Körper.Stil.Höhe="auto";

Diese Stile sind genau die Standardstile der entsprechenden CSS-Eigenschaften.
Diese Lösung weist jedoch einen Fehler auf: Sie ist nicht mit dem iOS-System kompatibel und der schwarze Bildschirmeffekt kann das Scrollen der Seite nicht verhindern. Hier ist eine weitere Lösung für mobile Geräte.

Lösung 2: Absolutes/festes Layout verhindert das Aufsteigen von Gesten-Scrolling-Ereignissen (nicht wirksam auf dem PC)

Gerade weil das Scrollen des mobilen Endgeräts auf dem Berührungsereignis des Bildschirms basiert, entstand die zweite Lösung (Taobao Mobile verwendet diese Lösung).
Zunächst müssen wir zwei grundlegende Kenntnisse haben: 1. Bei zwei überlappenden Seitenelementen löst das Element mit dem höheren Z-Index-Wert zuerst die Ereignisüberwachung aus, sodass Sie steuern können, ob der Ereignisfluss fortgesetzt werden soll. 2. Das Touch-Ereignis beim mobilen Scrollen basiert auf dem Ereignisfluss.
Auf der Grundlage der beiden oben genannten Erkenntnisse können wir die Designideen dieser Lösung verstehen. Das Prinzip von Lösung 2 lautet: Nehmen Sie keine Änderungen an der Originalseite vor, sondern verwenden Sie einfach einen schwarzen Bildschirm (Länge und Breite 100 %) mit einem höheren Z-Index-Wert und einem absoluten oder festen Layout, um die gesamte Seite zu blockieren. Hören Sie auf das Touchstart-Ereignis des schwarzen Bildschirms, beenden Sie den Ereignisfluss im Touchstart-Ereignis und verhindern Sie so, dass der Ereignisfluss fortgesetzt wird. Auf diese Weise wird das Berührungsereignis, das einen Bildlaufeffekt erzeugen kann, nicht auf die Seite übertragen und es findet kein Bildlauf statt.

Geben Sie hier die Bildbeschreibung ein

Der vollständige Testquellcode der Lösung 2 ist unten aufgeführt:

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="UTF-8">
		<Titel></Titel>
		<Stil>
			.Hauptinhalt{
				Position: relativ;
				Breite: 100 %;
				Hintergrundfarbe:#ccc;
				Höhe: 2000px;
			}

			.Hauptinhalt .Trigger{
				Breite: 200px;
				Höhe: 100px;
				Schriftgröße: 30px;
				Farbe: #000;
			}

			.Hauptinhalt .unten{
				Position: absolut;
				unten: 0;
				links: 0;
				Breite: 100 %;
				Höhe: 200px;
				Hintergrundfarbe: rot;
			}

			.schwarzes-Schild{
				Position: fest;
				oben: 0;
				links: 0;
				Breite: 100 %;
				Höhe: 100 %;
				Hintergrundfarbe: rgba (10,10,10,0,4);
				z-Index: 10;
			}

			.schwarzes-Schild .info{
				Schriftgröße: 40px;
				Farbe: #000;
				Rand: 1px durchgezogen;
				z-Index: 20;
			}
		</Stil>
	</Kopf>
	<Text>
		<div Klasse="Hauptinhalt">
			<button id="trigger" class="trigger">Ein/Aus</button>
			<div Klasse="bottom"></div>
		</div>
		<div id="Schild" Klasse="schwarzes Schild" style="Anzeige:keine;">
			<div id="info" class="info">Nachdem der aktuelle schwarze Bildschirm angezeigt wird, sollte die Seite nicht verschiebbar sein. Klicken Sie auf den aktuellen Text, um den schwarzen Bildschirm zu schließen</div>
		</div>
		
		<Skript>
			Funktion test2(){
				var showShield=false;
				var Schild = document.getElementById("Schild");
				var trigger = document.getElementById("trigger");
				var info = document.getElementById("info");
				var body = document.querySelector("body");
				var html = document.querySelector("html");

				//Klicken, um den schwarzen Bildschirm anzuzeigen trigger.addEventListener("click",function(){
					Schild.Stil.Anzeige="Block";
				},FALSCH);

				//Klicken, um den schwarzen Vorhang zu schließen info.addEventListener("touchstart",function(){
					Schild.Stil.Anzeige="keine";
				},FALSCH);

				//Berührungsereignisse in der Ebene des schwarzen Bildschirms blockieren shield.addEventListener("touchstart",function(e){
					e.stopPropagation();
					e.preventDefault();
				},FALSCH);
			}

			test2();
		</Skript>
	</body>
</html>

Dies ist das Ende dieses Artikels über die Popup-Maske der Frontend-Seite, die das Scrollen der Seite verhindert. Weitere relevante Inhalte zur Popup-Maske, die das Scrollen der Seite verhindert, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Detaillierte Erklärung der grundlegenden HTML-Tags und -Strukturen

>>:  CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen

Artikel empfehlen

So verwenden Sie „not in“ zur Optimierung von MySql

Als ich kürzlich in einem Projekt eine Auswahlabf...

Zusammenfassung der XHTML-Tags auf Blockebene

* Adresse - Adresse * Blockzitat - Blockzitat * Mi...

Analyse der Benutzererfahrung beim Design von Facebook-Dating-Websites

<br />Verwandter Artikel: Analyse der Inform...

So implementieren Sie ein responsives Layout mit CSS

Implementieren eines responsiven Layouts mit CSS ...

Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS

Vorwort Hier sind die Schritte zur Installation u...

Implementierungsbeispiel eines Nginx+Tomcat-Load-Balancing-Clusters

Inhaltsverzeichnis Einführung 1. Fallübersicht 2....

js, um einfache Lupeneffekte zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Grafisches Tutorial zur Installation und Konfiguration von CentOS 6.4 MySQL 5.7.18

Die spezifischen Schritte zur Installation von my...

Detaillierte Erklärung der MySQL DEFINER-Verwendung

Inhaltsverzeichnis Vorwort: 1. Kurze Einführung i...

Benutzer müssen wissen, warum

Als ich in der Wertpapierfirma arbeitete, war ich ...

Lösung für das Problem, dass MySQL-Befehle nicht auf Chinesisch eingegeben werden können

Finden Sie das Problem Als ich mich kürzlich über...

Detaillierte Erklärung der MySQL-Gruppensortierung, um die Top N zu finden

MySQL-Gruppensortierung, um die obersten N zu fin...

Detaillierte Erläuterung der Prinzipien des tiefen und flachen Klonens von JavaScript-Arrays und Nicht-Array-Objekten

Inhaltsverzeichnis Was sind flaches und tiefes Kl...

Vue kapselt die öffentliche Funktionsmethode zum Exportieren von Excel-Daten

vue+element UI kapselt eine öffentliche Funktion ...

Ein ausführliches Tutorial zur Verwendung von Docker zum Erstellen einer vollständigen Entwicklungsumgebung

Einführung in DNMP DNMP (Docker + Nginx + MySQL +...