フロントエンドページのポップアップマスクはページのスクロールを禁止します

フロントエンド開発者がよく遭遇する問題は、ユーザーに情報を提示するためのポップアップウィンドウを作成することです。このポップアップウィンドウが表示されると、多くの場合、ページコンテンツをブロックする灰色のマスクレイヤーが伴います。同時に、ページ全体がこのマスクで覆われ、クリックしたりスクロールしたりすることはできません。

ここに写真の説明を記入してください

解決策 1: オーバーフローを制御し、スクロールを禁止する (iOS とは互換性がありません)

PC でこの効果を作成するのは非常に簡単です。画面いっぱいに表示するために HTML の高さを 100% に設定し、ページがスクロールできないように HTML のオーバーフローを非表示に設定するだけです。
しかし、同じ問題でもモバイルデバイスでは異なります。上記の HTML 属性を設定するだけでは、モバイル端末でページが制限を超えてスクロールするのを防ぐことはできません。ポップアップボックスが表示されたときにページがスクロールしないようにするには、次のコードを設定する必要があります。

html.style.overflow="非表示";
html.style.height="100%";
body.style.overflow="非表示";
body.style.height="100%";

その理由は、モバイル端末がタッチイベントに基づいているためです。タッチイベントに基づいてスクロールを禁止するには、HTML でスクロールを禁止することを前提として、スクロールを禁止する必要があるコンテンツにラップするブロックレベル要素を追加し、このラップするブロックレベル要素の高さを 100% に設定し、overflow:hidden; を設定する必要があります。次に、ここで、必要なブロックレベル要素であるページ全体をラップする body を考えます。スクロールを禁止するように設定することで、モバイルページのスライド時間がページスクロールをトリガーしないようにすることができます。
ユーザーがポップアップウィンドウを閉じると、ページは通常の状態に戻ります。ページ全体のスクロール効果を復元するには、次の CSS スタイルプロパティを設定します。

html.style.overflow="表示可能";
html.style.height="auto";
body.style.overflow="表示可能";
body.style.height="auto";

これらのスタイルは、対応する CSS プロパティのデフォルトのスタイルとまったく同じです。
ただし、このソリューションには欠点があり、iOS システムと互換性がなく、黒い画面効果ではページのスクロールが妨げられません。モバイルデバイス向けの別のソリューションをご紹介します。

解決策 2: 絶対/固定レイアウトにより、ジェスチャスクロールイベントのバブルが防止されます (PC では効果がありません)

モバイル端末のスクロールが画面のタッチイベントに基づいているからこそ、2番目のソリューションが生まれました（Taobao Mobileはこのソリューションを採用しています）。
まず、前提となる 2 つの知識ポイントを知っておく必要があります。1. 重なり合う 2 つのページ要素の場合、z-index 値が高い方が最初にイベント監視をトリガーし、イベントフローを続行するかどうかを制御できます。2. モバイルスクロールのタッチイベントは、イベントフローに基づいています。
上記の 2 つの知識ポイントを基にして、このソリューションの設計アイデアを理解することができます。ソリューション 2 の原則は、元のページに変更を加えず、より高い z-index 値と絶対レイアウトまたは固定レイアウトの黒い画面 (長さと幅が 100%) を使用してページ全体をブロックし、黒い画面の touchstart イベントをリッスンして、touchstart イベントでイベントフローを終了し、イベントフローが継続しないようにすることです。こうすることで、スクロール効果を生み出すタッチイベントがページに伝達されず、スクロールは発生しなくなります。

ここに写真の説明を記入してください

ソリューション 2 の完全なテストソースコードを以下に掲載します。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8">
		<タイトル></タイトル>
		<スタイル>
			.メインコンテンツ{
				位置:相対;
				幅:100%;
				背景色:#ccc;
				高さ:2000ピクセル;
			}

			.メインコンテンツ .トリガー{
				幅:200px;
				高さ:100px;
				フォントサイズ:30px;
				色:#000;
			}

			.メインコンテンツ.bottom{
				位置:絶対;
				下:0;
				左:0;
				幅:100%;
				高さ:200px;
				背景色:赤;
			}

			.ブラックシールド{
				位置:固定;
				トップ:0;
				左:0;
				幅:100%;
				高さ:100%;
				背景色:rgba(10,10,10,0.4);
				zインデックス:10;
			}

			.black-shield .info{
				フォントサイズ:40px;
				色:#000;
				境界線:1px実線;
				zインデックス:20;
			}
		</スタイル>
	</head>
	<本文>
		<div class="main-content">
			<button id="trigger" class="trigger">オン/オフ</button>
			<div class="bottom"></div>
		</div>
		<div id="シールド" class="black-shield" style="display:none;">
			<div id="info" class="info">現在の黒い画面がポップアップ表示された後は、ページをスライドすることはできません。現在のテキストをクリックして、黒い画面を閉じます</div>
		</div>
		
		<スクリプト>
			関数test2(){
				var showShield=false;
				var シールド = document.getElementById("シールド");
				var トリガー = document.getElementById("トリガー");
				var info = document.getElementById("info");
				var 本文 = document.querySelector("本文");
				var html = document.querySelector("html");

				//クリックすると黒い画面が表示されますtrigger.addEventListener("click",function(){
					shield.style.display="ブロック";
				}、間違い）;

				//クリックすると黒いカーテンが閉じます info.addEventListener("touchstart",function(){
					シールドスタイルの表示="なし";
				}、間違い）;

				//ブラックスクリーンレイヤーのタッチイベントをブロックします shield.addEventListener("touchstart",function(e){
					e.stopPropagation();
					e.preventDefault();
				}、間違い）;
			}

			テスト2();
		</スクリプト>
	</本文>
</html>

これで、フロントエンドページのポップアップマスクによるページスクロール防止に関する記事は終了です。ポップアップマスクによるページスクロール防止に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLの基本タグと構造の詳細な説明

>>: 数ステップでサイバーパンク2077風の視覚効果を実現するCSS