The front-end page pop-up mask prohibits page scrolling

The front-end page pop-up mask prohibits page scrolling

A problem that front-end developers often encounter is creating a pop-up window to prompt users with information. When this pop-up window pops up, it is often accompanied by a gray mask layer that blocks the page content. At the same time, the entire page is covered by this mask and cannot be clicked or scrolled.

Write the picture description here

Solution 1: Control overflow and prohibit scrolling (not compatible with iOS)

It is very simple to create this effect on the PC. You only need to set the height of the HTML to 100% to fill the screen, and set the overflow of the HTML to hidden to ensure that the page cannot be scrolled.
But the same problem is different on mobile devices. Just setting the above attributes of HTML still cannot prevent the page from scrolling beyond the limit on the mobile terminal. We need to set the following code to prevent the page from scrolling when the pop-up box appears:

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

The reason is that the mobile terminal is based on touch events. To prohibit scrolling based on touch events, we must, on the basis of prohibiting scrolling in HTML, add a wrapping block-level element to the content that needs to be prohibited from scrolling, and then set the height of this wrapping block-level element to 100% and set overflow:hidden;. Then here we think that body wraps the entire page, which is the block-level element we need. Setting it to prohibit scrolling can ensure that the sliding time of the mobile page will not trigger page scrolling.
When the user closes the pop-up window, the page returns to normal. We set the following CSS style properties to restore the scrolling effect of the entire page:

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

These styles are exactly the default styles of the corresponding CSS properties.
However, this solution has a flaw, which is that it is not compatible with the iOS system, and the black screen effect cannot prevent the page from scrolling. Here is another solution for mobile devices.

Solution 2: Absolute/fixed layout prevents gesture scrolling events from bubbling (not effective on PC)

It is precisely because the scrolling of the mobile terminal is based on the touch event of the screen that the second solution was born (Taobao Mobile uses this solution).
First of all, we need to know two prerequisite knowledge points: 1. For two overlapping page elements, the one with a higher z-index value will trigger event monitoring first, so that you can control whether to let the event flow continue; 2. The touch event of mobile scrolling is based on the event flow.
With the above two knowledge points as a basis, we can understand the design ideas of this solution. The principle of solution 2 is: do not make any changes to the original page, just use a black screen (length and width 100%) with a higher z-index value and an absolute or fixed layout to block the entire page, and listen to the touchstart event of the black screen, end the event flow in the touchstart event, and thus prevent the event flow from continuing. In this way, the touch event that can produce a scrolling effect will not be transmitted to the page, and scrolling will not occur.

Write the picture description here

The complete test source code of solution 2 is posted below:

<!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 screen pops up, the page should not be slidable. Click the current text to close the black screen</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 display the black screen trigger.addEventListener("click",function(){
					shield.style.display="block";
				},false);

				//Click to close the black curtain 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>

This is the end of this article about the front-end page pop-up mask to prevent page scrolling. For more relevant content about the pop-up mask to prevent page scrolling, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  CSS to achieve Cyberpunk 2077 style visual effects in a few steps

>>:  Sample code using vue-router in html

Recommend

Example of how to achieve semi-transparent background image and opaque content in CSS3

I encountered this problem when I was making the ...

Complete steps to quickly build a vue3.0 project

Table of contents 1. We must ensure that the vue/...

Detailed summary of web form submission methods

Let's first look at several ways to submit a ...

Complete example of Vue encapsulating the global toast component

Table of contents Preface 1. With vue-cli 1. Defi...

Detailed explanation of the integer data type tinyint in MySQL

Table of contents 1.1Tinyint Type Description 1.2...

How to implement Ajax concurrent request control based on JS

Table of contents Preface Ajax serial and paralle...

How to install MySQL 8.0 database on M1 chip (picture and text)

1. Download First of all, I would like to recomme...

JavaScript implements click toggle function

This article example shares the specific code of ...

Detailed explanation of common commands in MySQL 8.0+

Enable remote access Enable remote access rights ...

Linux uses lsof/extundelete tools to restore accidentally deleted files or directories

Preface Linux does not have a prominent Recycle B...

Vue complete code to implement single sign-on control

Here is a Vue single sign-on demo for your refere...

HTML hyperlink style (four different states) setting example

Copy code The code is as follows: <style type=...

Understanding JavaScript prototype chain

Table of contents 1. Understanding the Equality R...

In-depth understanding of the use of r2dbc in MySQL

Introduction MySQL should be a very common databa...

Detailed explanation of js closure and garbage collection mechanism examples

Table of contents Preface text 1. Closure 1.1 Wha...