请看以下完整攻略。
在做弹窗时，通常会有蒙层的效果，以防止用户误点击背景操作。但是，这时候出现了一个问题，就是在弹窗出现的时候，蒙层底部的页面也跟着滚动了。影响了用户体验。因此，需要解决这个问题。
在这里提供几种解决方案，可以根据实际情况选择其中一种或多种方法。
body {
overflow: hidden;
}
这种方法是通过对body标签设置CSS样式，来实现禁止body滚动，从而解决底部页面跟随滚动的问题。但是，需要注意的是，当弹出层消失时，需要把禁止滚动的CSS样式去掉。
示例代码：
var modal = document.getElementById("modal"); // 获取弹出层
var body = document.getElementsByTagName("body")[0]; // 获取body
function showModal() {
modal.style.display = "block"; // 弹出层显示
body.style.overflow = "hidden"; // body滚动禁止
}
function hideModal() {
modal.style.display = "none"; // 弹出层隐藏
body.style.overflow = "auto"; // body滚动恢复
}
在蒙层上覆盖一个高度和整个页面一样的div，用来实现滚动距离的补偿。同时，还需要禁止蒙层的滚动事件。
示例代码：
<div id="scroll-compensate"></div><!-- 补偿div -->
<div id="modal"></div><!-- 弹出层 -->
#scroll-compensate {
position: absolute;
z-index: -1;
width: 100%;
height: 0;
top: 0;
left: 0;
}
var modal = document.getElementById("modal"); // 获取弹出层
var compensate = document.getElementById("scroll-compensate"); // 获取补偿div
function showModal() {
modal.style.display = "block"; // 弹出层显示
document.body.style.overflow = "hidden"; // 禁止整个页面滚动
compensate.style.height = document.documentElement.clientHeight + "px"; // 设置补偿div高度
}
function hideModal() {
modal.style.display = "none"; // 弹出层隐藏
document.body.style.overflow = "auto"; // 恢复整个页面滚动
compensate.style.height = 0; // 设置补偿div高度为0
}
以上就是两种解决方案的示例代码，可以根据实际情况选择其中一种或者多种方法进行使用。
通过以上两种方式，可以解决弹出层出现时底部页面跟随滚动的问题。具体使用时，可以根据实际情况选择其中一种或者多种方案。
本文链接：http://task.lmcjl.com/news/10059.html