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

Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment

1. Prerequisites Since I have installed it severa...

A brief discussion on how to learn JS step by step

Table of contents Overview 1. Clearly understand ...

Why MySQL does not recommend deleting data

Table of contents Preface InnoDB storage architec...

Detailed tutorial on installing phpMyAdmin on Ubuntu 18.04

We will install phpMyAdmin to work with Apache on...

Implementation of Nginx hot deployment

Table of contents Semaphore Nginx hot deployment ...

Two ways to reset the root password of MySQL database using lnmp

The first method: Use Junge's one-click scrip...

Detailed explanation of the use of nohup /dev/null 2>&1

nohup command: If you are running a process and y...

docker cp copy files and enter the container

Enter the running container # Enter the container...

Implementation example of Docker deployment of front-end and back-end separation projects

Table of contents 1. Environmental Preparation 2....

How to mount a data disk on Tencent Cloud Server Centos

First, check whether the hard disk device has a d...

Practice of using Tinymce rich text to customize toolbar buttons in Vue

Table of contents Install tinymce, tinymce ts, ti...

Discussion on style customization and browser compatibility issues when using input element [type="file"]

I encountered such a problem when doing the writte...

Summary of the Differences between find() and filter() Methods in JavaScript

Table of contents Preface JavaScript find() Metho...

mysql group_concat method example to write group fields into one row

This article uses an example to describe how to u...

Analysis of implicit bug in concurrent replication of MySQL 5.7

Preface Most of our MySQL online environments use...