html css 遮罩层下面的禁止滚动，禁止点击事件，遮罩层里面的运行滚动和点击事件

HTML 和 CSS 结合可以创建一个遮罩层，通常用于显示模态框、提示信息等场景，阻止用户对遮罩层下方的内容进行交互。下面是实现这种效果的一些基本步骤：

1. **禁止滚动和点击**：
- 使用CSS的`pointer-events`属性可以控制元素的鼠标点击和触摸事件。给遮罩层设置`pointer-events: none;`可以让其下的内容失去响应能力。

   .mask-layer {
       pointer-events: none;
       /* 其他样式 */
   }

- 对于阻止滚动，可以为遮罩层设置固定高度和宽度，然后在其上再覆盖一层透明背景，并设置`overflow: hidden;`，这样就隐藏了下面内容的滚动条。

   .mask-layer {
       overflow: hidden;
   }

   .mask-content {
       position: relative;
       z-index: 1; /* 确保遮罩层在内嵌内容之上 */
       background-color: rgba(0, 0, 0, 0.5); /* 可选，提供半透明背景以便看到内容 */
   }

2. **允许遮罩层内的滚动和点击**：
- 在遮罩层内部，你可以设置一个相对独立的区域，如`.mask-content`，让它的`pointer-events`恢复到`auto`或者`auto`以外的其他值，这样这个区域内可以有正常的点击和滚动操作。

   .mask-content {
       pointer-events: auto; /* 或者其他需要的值 */
       overflow-y: scroll; /* 如果需要纵向滚动 */
   }