沃梦达 / IT编程 / 前端开发 / 正文

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

沃梦达教程前端开发

2023-12-26 10

请看以下完整攻略。

请看以下完整攻略。

背景

在做弹窗时，通常会有蒙层的效果，以防止用户误点击背景操作。但是，这时候出现了一个问题，就是在弹窗出现的时候，蒙层底部的页面也跟着滚动了。影响了用户体验。因此，需要解决这个问题。

解决方案

在这里提供几种解决方案，可以根据实际情况选择其中一种或多种方法。

方案一：禁止body滚动

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
}