禁止弹窗中蒙层底部页面跟随滚动的几种方法

在弹窗展示时，蒙层作为不可或缺的元素，担当着隔断页面与弹窗交互的重要角色。当我们在蒙层上滚动时，底部页面的跟随滚动常常会带来不必要的困扰。本文将为大家介绍几种禁止弹窗中蒙层底部页面跟随滚动的方法，以供参考。

一、场景概述

弹窗作为一种常见的交互方式，蒙层是其重要组成部分，用于暂时阻断页面与弹窗区块的交互。但在蒙层的使用过程中，往往会出现底部页面跟随滚动的情况，这显然不符合我们的预期。

二、方案分析

方案一：通过CSS样式控制

在打开蒙层时，为body添加样式，如“overflow: hidden; height: 100%;”，以禁止页面滚动。关闭蒙层时，则移除这些样式。此方案简单方便，无需复杂的逻辑，但兼容性较差，尤其在移动端表现不佳。部分安卓机型及Safari浏览器中，无法有效阻止底部页面滚动。

方案二：利用移动端的touch事件

通过获取每个触点的属性，如位置、大小、形状等，利用touch事件来阻止默认行为（即页面滚动）。此方案适用于移动端，但逻辑较为复杂。当蒙层内容有滚动条时，需要判断蒙层内容是否滚动到尽头，以决定是否阻止默认行为。

三、实施细节

1. 方案二实施过程中的技巧

在一次滑动过程中，若蒙层内容可以滚动，则继续滚动时页面内容不会滚动，直到松手后再继续滚动，页面内容才会滚动。利用这一特性，我们可以优化代码逻辑，提高用户体验。

2. 注意事项

在编写代码时，需确保兼容各种设备和浏览器，以便为用户提供良好的体验。对于蒙层内容的滚动条处理也要充分考虑，以确保滚动行为的顺畅和合理。

HTML部分：

```html

```

CSS部分：

```css

body { / 整体样式调整 /

margin: 0; / 移除了默认的边距 /

padding: 20px; / 调整内边距 /

}

.btn { / 按钮样式 /

border: none; / 无边框 /

outline: none; / 无轮廓 /

font-size: inherit; / 继承字体大小 /

border-radius: 4px; / 边角圆滑 /

padding: 1em; / 内边距 /

width: 100%; / 按钮宽度占满父元素宽度 /

margin: 1em 0; / 上下的外边距 /

color: fff; / 文字颜色 /

background-color: ff5777; / 背景颜色 /

}

.container { / 蒙层容器样式 /

position: absolute; / 固定位置相对于整个文档流 /

top: 0; left: 0; right: 0; bottom: 0; / 定位到整个页面的四个边界 /

z-index: 1001; / 确保在其他元素之上 /

display: none; / 默认隐藏蒙层容器 /

}

.layer { / 蒙层背景样式 /

position: absolute; / 定位方式调整 /

top: 0; left: 0; right: 0; bottom: 0; / 定位到整个页面的四个边界 /

z-index: 1; / 设置z轴层级 /

background-color: rgba(0, 0, 0, .3); / 蒙层背景颜色及透明度调整 /

}

.content { / 内容区域样式 /

position: absolute; / 定位方式调整 /

bottom: 0; left: 0; right: 0; / 定位位置调整以适应屏幕宽度 /

height: auto; / 高度自适应 / / 调整背景色和其他样式细节 / overflow-y: auto; / 开启垂直滚动条 / 其他样式细节调整... } } } } } } } } } ``` JavaScript部分： ```javascript const btnNode = document.querySelector('.btn') const containerNode = document.querySelectorAll('.container')[0] const layerNode = document.querySelectorAll('.layer')[0] const contentNode = document.querySelectorAll('.content')[0] let scrollState = false // 当前是否处于可滚动状态 let startY = null // 记录开始滑动的初始位置 let lastScrollTop = null // 记录上一次滚动的位置 // 打开蒙层 btnNode.addEventListener('click', () => { containerNode.style.display = 'block'; }, false) // 蒙层部分始终阻止默认行为 layerNode.addEventListener('touchstart', e => { e.preventDefault(); }, false) // 核心部分内容节点监听事件 contentNode.addEventListener('touchstart', e => { startY = e.touches[0].pageY }, false) contentNode.addEventListener('touchmove', e => { if (!scrollState) return // 如果不在可滚动状态，直接返回 let currentScrollTop = contentNode.scrollTop if (startY !== null && currentScrollTop !== lastScrollTop) { // 判断是否开始滚动 scrollState = true // 设置当前处于可滚动状态 // 判断滑动方向 if (startY > currentScrollTop) { // 判断向上滑动 e.preventDefault() // 如果向上滑动，阻止默认行为 } else if (startY < currentScrollTop) { // 判断向下滑动 e.preventDefault() // 如果向下滑动，阻止默认行为 } lastScrollTop更佳方案：固定页面以阻止滚动

当我们面对复杂的事件判断，如触摸事件，是否可以考虑跳出固有思维，寻找更为简便且高效的解决方案呢？为此，我们推出了方案三，一种全新的页面固定方案，以应对页面滚动的问题。

方案三详解

我们的思路很简单：如果我们想要阻止页面滚动，那么我们可以将页面固定在视窗上，这样它就无法滚动了。当蒙层关闭时，我们再将其释放。这种方式的实现主要依赖于CSS的"position: fixed"属性。

对于"position: fixed"，想必大家并不陌生。它可以将元素固定在浏览器窗口的指定位置，即使页面滚动，它依然停留在同一位置。详细的用法和特性，大家可以参考相关文档进行深入学习。

在实际操作中，我们需要注意一些细节。例如，当页面被固定在视窗后，内容会回到最顶端，这时我们需要记录并同步值。这样，即使在页面固定后，用户也能顺利浏览到他们想要的内容。

示例代码

以下是方案三的基本实现方式：

```javascript

let bodyEl = document.body;

let scrollTop = 0;

function fixBodyScroll(isFixed) {

if (isFixed) {

scrollTop = window.scrollY; // 记录当前滚动位置

bodyEl.style.position = 'fixed'; // 固定页面

bodyEl.style.top = -scrollTop + 'px'; // 同步滚动位置

} else {

bodyEl.style.position = ''; // 取消固定页面

bodyEl.style.top = ''; // 清除top样式

window.scrollTo(0, scrollTop); // 回到原先的滚动位置

}

}

```

应用建议

若应用场景为PC端，推荐使用方案一；若为H5页面，方案三将是一个很好的选择。若应用场景覆盖全平台，那么强烈推荐你尝试方案三。它的优点在于简单、方便、兼容性好，一次封装，永久受用。

本文至此结束，感谢各位读者对狼蚁SEO的支持。如果有任何疑问或建议，欢迎留言交流，我们会尽快回复。希望本文的内容能对大家的学习或工作有所帮助。