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

Einführung und Installation von vue-cli

Inhaltsverzeichnis 1. Einleitung 2. Einführung in...

Detaillierte Erklärung der InnoDB-Speicherdateien in MySQL

Physisch gesehen besteht eine InnoDB-Tabelle aus ...

Detailliertes Tutorial zur Installation von Ubuntu 19.10 auf Raspberry Pi 4

Da einige Abhängigkeiten von OpenCV beim Ausführe...

So entwickeln Sie eine Progressive Web App (PWA)

Inhaltsverzeichnis Überblick Erfordern URL der An...

Eine kurze Diskussion über bedingte Kodierung und Seitenlayout der VUE-Uni-App

Inhaltsverzeichnis Bedingte Kompilierung Seitenla...

So schreiben Sie HTML-Header in der Webentwicklung für mobile Geräte

Code kopieren Der Code lautet wie folgt: <Kopf...

Zusammenfassung wichtiger MySQL-Protokolldateien

Autor: Ding Yi Quelle: https://chengxuzhixin.com/...

So erstellen Sie https mit Nginx und dem kostenlosen Tencent Cloud-Zertifikat

Ich habe gelernt, wie man https bekommt. Kürzlich...

JS implementiert das Baidu-Suchfeld

In diesem Artikelbeispiel wird der spezifische JS...

Einführung in gängige MySQL-Speicher-Engines sowie Parametereinstellung und -optimierung

MyISAM, eine häufig verwendete Speicher-Engine in...

So verwenden Sie js, um festzustellen, ob eine Datei UTF-8-codiert ist

Konventionelle Lösung Verwenden Sie FileReader, u...

VUE implementiert Saugknopf an der Unterseite

In diesem Artikelbeispiel wird der spezifische Co...

37 Tipps für ein gutes User Interface Design (mit Bildern)

1. Versuchen Sie, ein einspaltiges statt eines meh...

Website-Homepage-Design im Illustrationsstil Neuer Trend im Website-Design

Sie können sehen, dass ihre visuellen Effekte sehr...

Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()

Der mathematische Ausdruck calc() ist eine Funkti...