使用 CSS 与 JS 实现页面遮罩层并禁止 Body 滚动

实现思路与原理

要实现完美的遮罩层效果，需要解决两个核心问题：一是如何确保遮罩层覆盖整个视口且位于最顶层；二是如何在不影响遮罩层自身可滚动性的前提下，隐藏背景页面的滚动条。

1. 遮罩层布局：使用 position: fixed 将遮罩元素固定在视口，设定 top、right、bottom、left 为 0 以确保全屏覆盖，并通过较高的 z-index 值使其浮于其他元素之上。
2. 锁定页面滚动：将根容器 body 或主容器的 overflow 属性设置为 hidden，从而在视觉上移除滚动条并禁止滚动行为。

准备条件

本示例需要基础的 HTML 结构配合简单的 CSS 样式和 jQuery 逻辑（也可以使用原生 JS）。为确保效果明显，页面内容高度应超过视口高度以触发滚动条。

第1步：构建遮罩层样式

目的：创建一个固定定位、半透明的全屏元素，用于拦截用户操作并视觉遮蔽下方内容。

.cover {
    /* 关键定位：固定于视口，四面贴边 */
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    
    /* 层级设置：确保高于普通内容 */
    z-index: 1002; 
    
    /* 外观与透明度 */
    background-color: #777;
    opacity: 0.5;
    -moz-opacity: 0.5; /* 兼容旧版火狐 */
    filter: alpha(opacity=60); /* IE 滤镜兼容 */
    
    display: none; /* 初始状态隐藏 */
}

第2步：编写 HTML 结构

目的：搭建包含长内容的主容器和隐藏的遮罩层 DOM 节点。

以下代码展示了一个模拟高页面的结构，包含触发按钮和遮罩层 div：

<body>
    <!-- 模拟长内容区域，产生滚动需求 -->
    <div class="container" style="height:2000px;">
        <div style="height:1000px;"></div>
        <a href="javascript:;" onclick="showMask()">点我显示遮罩层</a><br />
    </div>
    
    <!-- 遮罩层元素，class对应上方样式 -->
    <div id="cover" class="cover"></div>
</body>

第3步：添加交互脚本

目的：通过 JavaScript 监听点击事件，动态切换遮罩层显示状态并锁定/解锁 Body 滚动。

function showMask(){
    // 1. 禁止 body 滚动
    $('body').css("overflow", "hidden");
    // 2. 显示遮罩层
    $("#cover").show();
}

// 实际应用中，通常还需要一个 hideMask 函数来恢复滚动
function hideMask(){
    $('body').css("overflow", "auto");
    $("#cover").hide();
}

完成判断

当点击页面上的链接后，屏幕中央应出现灰色半透明覆盖层。此时尝试滚动鼠标滚轮或拖动页面，背景的高大页面应保持静止，无法滑动。这表示遮罩层已正确捕获焦点，且 Body 的滚动属性已成功屏蔽。

简要总结

通过 position: fixed 配合 z-index 实现全屏遮盖，再辅以 overflow: hidden 切断底层滚动流，是前端开发中最常用且兼容性较好的模态框背景处理方案。该逻辑简洁高效，适用于大多数需要中断用户当前浏览流程的弹窗场景。

以上就是页面遮罩层并阻止body滚动的详细内容，更多关于前端遮罩层与滚动控制的资料请关注本站其它相关文章！