CSS prevents the mask layer from penetrating the event to achieve page scrolling effect
CSS Prevents Overlay Events from Penetrating Page Scrolling
In web development, we often encounter the need to use overlays to implement pop-up windows or prompts. However, when an overlay is present, we sometimes don’t want users to be able to scroll through the content beneath it. In this case, we need to prevent the overlay from penetrating page scrolling. This article will explain how to achieve this effect using CSS.
1. Use the position: fixed property
By setting the overlay’s position property to fixed, the overlay will be fixed to the page, preventing it from scrolling with the page, thus preventing the content beneath it from scrolling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Position</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.content {
height: 2000px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>Content Area</h1>
<p>Scroll down to see the effect</p>
</div>
</body>
</html>
Output:
In the above example, the position property of the overlay .overlay is set to fixed, making it fixed to the page. When the page scrolls, the overlay does not scroll with it, thus preventing the content beneath it from scrolling.
2. Use the overflow: hidden property
Another way to prevent scrolling caused by an overlay’s overflow event is to set the overflow property of the content below the overlay to hidden. This will hide the overflowing portion of the content, preventing scrolling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Hidden</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.content {
height: 2000px;
background-color: #f0f0f0;
overflow: hidden; }
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>Content Area</h1>
<p>Scroll down to see the effect</p>
</div>
</body>
</html>
Output:
In the above example, the overflow property of the content below the overlay, .content, is set to hidden, making the overflow portion hidden. In this way, even if the mask layer appears, users cannot view the content under the mask layer by scrolling the page.
3. Use pointer-events: Another way to prevent the overlay from receiving mouse events and scrolling the page is to set the overlay's <code>pointer-events property to none. This prevents the overlay from receiving mouse events and thus preventing page scrolling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Events None</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
pointer-events: none;
}
.content {
height: 2000px;
background-color: #f0f0f0; }
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>Content Area</h1>
<p>Scroll down to see the effect</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Events None</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
pointer-events: none;
}
.content {
height: 2000px;
background-color: #f0f0f0; }
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>Content Area</h1>
<p>Scroll down to see the effect</p>
</div>
</body>
</html>
Output:
In the above example, the pointer-events property of the overlay layer .overlay is set to none, so that it does not receive mouse events. This way, even if the overlay appears, the user won’t be able to scroll the page using the mouse.
4. Use JavaScript Event Listeners
In addition to CSS properties, you can also use JavaScript event listeners to prevent the overlay from penetrating events and causing page scrolling. Here is an example code using JavaScript event listening:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Event Listener</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.content {
height: 2000px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>Content Area</h1>
<p>Scroll down to see the effect</p>
</div>
<script>
document.querySelector('.overlay').addEventListener('wheel', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
Output:
In the above example, using JavaScript event monitoring, when a mouse wheel event occurs on the overlay, the e.preventDefault() method is used to prevent the default scrolling behavior, thereby preventing overlay events from scrolling through the overlay.
5. Combining Multiple Methods
Sometimes, to better prevent overlay events from scrolling through the overlay, you can combine multiple methods. Here’s an example code that combines position: fixed and pointer-events: none:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Methods</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
pointer-events: none;
}
.content {
height: 2000px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>Content Area</h1>
<p>Scroll down to see the effect</p>
</div>
</body>
</html>
Output:
In the above example, the overlay layer .overlay uses both the position: fixed and pointer-events: none attributes. Combined, these properties effectively prevent overlay events from scrolling.
Through the above example code, we can see how to use CSS and JavaScript to prevent overlay events from scrolling. Based on your needs, you can choose the appropriate method to control the scrolling effect and enhance the user experience.