1. 引言
在开发小程序时，经常会遇到要弹窗来提示用户一些信息。但是这时候如果允许下层内容滚动，用户可能会因为误触而误操作。因此我们需要一种方法来禁止下层内容的滚动。下面本文将介绍两种实现方式。
2. 使用CSS样式
CSS样式是一种简单的实现方式。我们可以设置一个容器，并对其应用以下CSS样式：
.container{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
这样，在弹窗弹出时，只需要对应用了该样式的容器设置display: block;，就可以禁止下层内容的滚动。
2.1 样式解释
position: fixed; 将容器设置为固定定位，使其不随页面滚动而移动。
top:0; left:0; 将容器的上边缘和左边缘分别与页面的上边缘和左边缘对齐。
height: 100%; width: 100%; 将容器的高度和宽度设置为100%，使其覆盖整个页面。
overflow: hidden; 使容器内的内容超出容器部分不可见，从而禁止滚动。
3. 使用JavaScript
另外一种实现方式是使用JavaScript，在弹窗弹出时动态给页面添加一个遮罩层。我们可以在弹窗显示时动态生成一个<div>元素，并设置样式使其填满整个窗口，并置于最顶层。代码如下：
function showPopup(){
//添加遮罩层
var mask = document.createElement('div');
mask.style.position = 'fixed';
mask.style.top = '0';
mask.style.left = '0';
mask.style.width = '100%';
mask.style.height = '100%';
mask.style.background = 'rgba(0,0,0,0.5)';
mask.style.zIndex = '9999';
document.body.appendChild(mask);
//显示弹窗
//...
}
这样，在遮罩层的覆盖下，下层的内容就无法滚动了。
3.1 代码解释
document.createElement('div') 创建一个<div>元素，用于表示遮罩层。
mask.style.position = 'fixed' 设置遮罩层为固定定位，使其不随页面滚动而移动。
mask.style.top = '0'; mask.style.left = '0'; 将遮罩层的上边缘和左边缘分别与页面的上边缘和左边缘对齐。
mask.style.width = '100%'; mask.style.height = '100%'; 将遮罩层的宽度和高度设置为100%，使其填满整个窗口。
mask.style.background = 'rgba(0,0,0,0.5)'; 设置遮罩层的背景色为半透明的黑色，以达到遮盖下层内容的效果。
mask.style.zIndex = '9999'; 将遮罩层的堆叠顺序设置为最高，使其覆盖在所有元素之上。
4. 总结
本文介绍了两种实现方法：使用CSS样式和使用JavaScript。两种方法各有优缺点，根据实际情况选择合适的方法即可。当然，我们也要考虑到用户体验，只有在必要的情况下才应该禁止下层内容的滚动，避免给用户操作带来困扰。