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

Detaillierte Erläuterung von Beispielen für MySQL-Einzeltabellenabfragevorgänge [Syntax, Einschränkungen, Gruppierung, Aggregation, Filterung, Sortierung usw.]

Dieser Artikel beschreibt die MySQL-Einzeltabelle...

25 CSS-Frameworks, Tools, Software und Vorlagen geteilt

Kobold-Kuh herunterladen CSS-Fussel herunterladen...

Eine kurze Diskussion über das Design des Tomcat-Mehrschichtcontainers

Inhaltsverzeichnis Containerhierarchie Der Prozes...

Erläuterung des Beispiels für die automatische Anmeldung unter Linux

Es gibt viele Skripte im Internet, die expect ver...

Lösen Sie das Problem ungültiger UTF8-Einstellungen in MySQL 5.6

Nach der Dekomprimierung der grünen Version von m...

Linux nutzt duale Netzwerkkartenbindung und Schraubendreherschnittstelle

Was ist eine Bindung? NIC-Bond ist eine Technolog...

Implementierung von Vergleichen, Sortieren und anderen Operationen für Daten vom Typ varchar in MySQL

Bei der Verwendung von MySQL werden Daten im Allg...

Implementierung der K8S-Bereitstellung eines Docker-Containers

Umgebung: (Docker, K8s-Cluster), fahren Sie mit d...

Docker installiert und führt den RabbitMQ-Beispielcode aus

Ziehen Sie das Bild: [mall@VM_0_7_centos ~]$ sudo...

Beispiel einer Autorisierungsüberprüfungsmethode von Nest.js

Inhaltsverzeichnis 0x0 Einführung 0x1 RBAC-Implem...

So überprüfen Sie die PCIe-Version und -Geschwindigkeit unter Linux

PCIE verfügt über vier verschiedene Spezifikation...

Beispiel zum Einrichten eines Linux-Systems zur automatischen Ausführung eines Skripts beim Start

Vorwort Hallo zusammen, ich bin Liang Xu. Bei der...

Ein Tutorial zur Installation, Verwendung und automatischen Kompilierung von TypeScript

1. Einführung in TypeScript Im vorherigen Artikel...

MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen

MySQL ist eine kostenlose relationale Datenbank m...

JavaScript Canvas implementiert Grafiken und Text mit Schatten

Verwenden Sie Canvas, um Grafiken und Text mit Sc...