1.首先呢我们需要创建html结构和css操作，如下所示：
<!DOCTYPE html> <html> <head> <title></title> <style> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } .content { position: relative; z-index: 999; } </style> </head> <body> <div class="mask"></div> <div class="content"> //这里是内容区 </div> </body> </html>
2.接下来呢我们需要使用js来控制遮罩层的显示隐藏以及页面的滚动行为，如下所示：
// 获取遮罩层和内容容器元素 const mask = document.querySelector('.mask'); const content = document.querySelector('.content'); // 显示遮罩层并禁止页面滚动 function showMask() { // 添加样式使遮罩层显示 mask.style.display = 'block'; // 计算滚动条的偏移量 const scrollY = window.scrollY; // 设置内容容器的样式，固定在当前位置 content.style.top = `-${scrollY}px`; // 禁止页面滚动 document.body.style.overflow = 'hidden'; } // 隐藏遮罩层并允许页面滚动 function hideMask() { // 移除遮罩层的显示样式 mask.style.display = 'none'; // 获取之前保存的滚动条偏移量 const scrollY = parseInt(content.style.top.replace('-', '')); // 恢复页面滚动 document.body.style.overflow = ''; // 恢复滚动条的偏移量 window.scrollTo(0, scrollY); } // 绑定事件，点击遮罩层时隐藏遮罩层 mask.addEventListener('click', hideMask); // 使用示例： // 调用showMask()函数显示遮罩层 // 调用hideMask()函数隐藏遮罩层
showMask()函数用于显示遮罩层，它会将遮罩层的display属性设置为block以显示遮罩，并且计算当前页面滚动的偏移量，将内容容器的top属性设置为负值，
使其固定在当前位置。同时，禁止页面滚动通过将document.body的overflow属性设置为hidden来实现。
hideMask()函数则用于隐藏遮罩层，它会将遮罩层的display属性设置为none以隐藏遮罩，并且获取之前保存的滚动条偏移量，重新设置页面滚动和滚动条偏移量，恢复页面的正常滚动行为。
最后，通过给遮罩层添加点击事件监听器，当用户点击遮罩层时，调用hideMask()函数来隐藏遮罩层，以上就是整个代码逻辑的实现过程
