BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

フロントエンドページのポップアップマスクは、ページのスクロールを無効にします。

2022-01-21 02:33:12

フロントエンド開発者がよく遭遇する問題として、ユーザーに情報を促すポップアップボックスの作成があります。このとき、グレーのマスクレイヤーがページのコンテンツをブロックし、ページ全体がマスクレイヤーに覆われてクリックやスクロールができない状態になることがよくあります。

オプション1：コントロールオーバーフローでスクロールを無効化（iosは非対応）

PCでこの効果を出すのはとても簡単で、htmlの高さを画面の100％に設定し、htmlのoverflowをhiddenに設定して、ページがスクロールしないようにするだけです。
しかし、同じ問題でもモバイルの場合は違います。htmlのtop属性を設定するだけでは、まだモバイルでのスクロールを無効にすることはできず、ポップアップボックスが表示されたときにスクロールを無効にするために、以下のコードを設定する必要があります。 

html.style.overflow="hidden";
html.style.height="100%";
body.style.overflow="hidden";
body.style.height="100%";

モバイルはタッチイベントに基づくため、タッチイベントに基づくスクロールを無効にするには、html disable scrolling の上に wrapping layer ブロックレベル要素を追加し、この wrapping layer ブロックレベル要素の高さを 100% に設定し overflow:hidden; とする必要があります。ここでは body がページ全体を包むと考え、まさに必要なブロックレベル要素であり、同様に彼をスクロール無効に設定して、モバイルページのスライド時間がページスクロールをトリガーしないようにします。
ユーザーがポップアップボックスを閉じてページが元に戻ったら、以下のCSSスタイルプロパティを設定して、ページ全体のスクロール効果を元に戻します。 

html.style.overflow="visible";
html.style.height="auto";
body.style.overflow="visible";
body.style.height="auto";

これらのスタイルは、対応するCSSプロパティのデフォルトスタイルと全く同じである。
しかし、この解決策には欠点があります。それは、iosシステムと互換性がなく、ブラックスクリーン効果でページのスクロールを止めることができないことです。ここでは、モバイル用の代替ソリューションをご紹介します。

解決策2: 絶対/固定レイアウトでジェスチャースクロールイベントのバブリングを防ぐ (PCでは有効ではない)

モバイルのスクロールが画面のタッチイベントに基づいているため、オプション2が生まれたのです（モバイルタオバオで使用されています）。
まず、前提となる2つの知識を知っておく必要があります。1) 重なり合う 2 つのページ要素、z-index 値が大きい方が先にイベントリスナーを起動するので、ここでイベントフローを継続させるかどうかを制御できる、2) モバイルスクロールのタッチイベント、イベントフローに基づく。
以上の2つの知識を土台に、この方式の設計思想が理解できるようになります。解決策2の原理は、元のページに変更を加えず、z-indexの値を高くして、絶対または固定レイアウトの黒い画面（縦横100%）でページ全体をブロックし、黒い画面のタッチ開始イベントを聞き、タッチ開始イベントでイベントフローを終了し、イベントフローが続かないようにブロックするだけです。こうすることで、スクロール効果を生むタッチイベントがページに到達せず、スクロールが発生しなくなります。


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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.main-content{
				position:relative;
				width:100%;
				background-color:#ccc;
				height:2000px;
			}

			.main-content .trigger{
				width:200px;
				height:100px;
				font-size:30px;
				color:#000;
			}

			.main-content .bottom{
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				height:200px;
				background-color:red;
			}

			.black-shield{
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background-color:rgba(10,10,10,0.4);
				z-index:10;
			}

			.black-shield .info{
				font-size:40px;
				color:#000;
				border:1px solid;
				z-index:20;
			}
		</style>
	</head>
	<body>
		<div class="main-content">
			<button id="trigger" class="trigger">on/off</button>
			<div class="bottom"></div>
		</div>
		<div id="shield" class="black-shield" style="display:none;">
			<div id="info" class="info">After the current black-shield pop-up, the page should not slide, click the current text and close the black-shield</div>
		</div>
		
		<script>
			function test2(){
				var showShield=false;
				var shield=document.getElementById("shield");
				var trigger=document.getElementById("trigger");
				var info=document.getElementById("info");
				var body=document.querySelector("body");
				var html=document.querySelector("html");

				//click to show the black screen
				trigger.addEventListener("click",function(){
					shield.style.display="block";
				},false);

				//click to close the black screen
				info.addEventListener("touchstart",function(){
					shield.style.display="none";
				},false);

				//Block touch events in the black screen layer
				shield.addEventListener("touchstart",function(e){
					e.stopPropagation();
					e.preventDefault();
				},false);
			}

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

今回はフロントエンドページのページスクロールを禁止するポップアップボックスマスクについて紹介しましたが、より関連するページスクロールを禁止するポップアップボックスマスクの内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いいたします!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します