蒙版开启时允许背景滚动但禁用链接点击的CSS实现方法

要实现蒙版开启时内容可滚动、但链接无法点击的效果，核心思路是保留容器的滚动能力，同时单独禁用可交互元素的点击事件，具体实现如下：

1. 调整CSS逻辑 #

不需要修改蒙版的pointer-events属性（保持pointer-events: none让滚动事件能穿透到内容容器），而是通过父容器的状态类来控制内容里链接的交互性：

.main{
  position: relative;
}
.masked-content {
  height: 150px;
  overflow: auto;
}
.mask {
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none; /* 保留滚动穿透 */
  cursor: not-allowed;
}

/* 蒙版开启时，禁用内容里的链接点击 */
.main.mask-active .masked-content a {
  pointer-events: none;
  cursor: not-allowed;
  color: #999; /* 可选：视觉上提示链接不可点击 */
}

2. 控制蒙版状态 #

通过给父容器.main添加/移除mask-active类来切换蒙版的开启/关闭状态：

<!-- 蒙版开启状态 -->
<div class="main mask-active">
  <div class="masked-content">
    This is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents <a href="www.google.com">above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above tents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the mask</a>
  </div>
  <div class="mask">Some contents above the mask</div>
</div>

<!-- 蒙版关闭状态（移除mask-active类即可） -->
<div class="main">
  <!-- 内容结构同上 -->
</div>

原理说明 #

• pointer-events: none仅作用于链接时，不会影响内容容器的滚动行为（滚动是容器本身的默认行为，与链接的鼠标事件无关）。
• 蒙版的pointer-events: none确保鼠标滚轮事件能穿透到下方的内容容器，实现滚动效果。
• 通过父类状态控制，能轻松在蒙版开启/关闭时切换链接的可点击性，逻辑清晰且易维护。

内容的提问来源于stack exchange，提问作者user1234