Javascript CSS覆盖菜单，冻结背景滚动

是否可以创建一个CSS覆盖菜单，冻结覆盖的主要内容的滚动？也就是说，当“菜单覆盖”处于活动状态时，可以滚动菜单，但不能滚动其后面的内容

我已经创建了一个菜单覆盖，但是当你滚动菜单时，它也会滚动背景内容。当菜单覆盖处于活动状态时，是否仍然可以冻结后面的内容

下面是我为菜单创建的javascript

// open menu overlay / hide background content   
function openNav() {
    document.querySelector("nav").style.display = "block";
    document.querySelector("body").style.background = "#999";
    document.getElementById("btn-menuclose").style.display = "block";
    document.getElementById("btn-menu").style.display = "none";
    document.getElementById("background").style.display = "none";  
}

//close menu overlay, reveal background content again
function closeNav() {
    document.querySelector("nav").style.display = "none";
    document.querySelector("body").style.background = "#fff";
    document.getElementById("btn-menuclose").style.display = "none";
    document.getElementById("btn-menu").style.display = "block";
    document.getElementById("background").style.display = "block";  
}

---

添加

溢出：隐藏

指向不应滚动的选择器（并在之后将其取消设置为可见），例如：

---

如有必要，您也可以直接在正文上进行设置。

添加

溢出：隐藏

指向不应滚动的选择器（并在之后将其取消设置为可见），例如：

---

如有必要，您也可以直接在主体上进行设置。

在主体上添加溢出：当溢出：关闭时可见

// open menu overlay / hide background content   
function openNav() {
document.querySelector("nav").style.display = "block";
document.querySelector("body").style.background = "#999";
document.getElementById("btn-menuclose").style.display = "block";
document.getElementById("btn-menu").style.display = "none";
document.getElementById("background").style.display = "none"; 
document.querySelector("body").style.overflow ="none";


}

//close menu overlay, reveal background content again
function closeNav() {
document.querySelector('"body".style.overflow = "visible";
document.querySelector("body").style.background = "#fff";
document.getElementById("btn-menuclose").style.display = "none";
document.getElementById("btn-menu").style.display = "block";
document.getElementById("background").style.display = "none";  
document.querySelector("nav").style.display = "none";

}

---

当溢出：关闭时可见时，将溢出：无添加到正文

// open menu overlay / hide background content   
function openNav() {
document.querySelector("nav").style.display = "block";
document.querySelector("body").style.background = "#999";
document.getElementById("btn-menuclose").style.display = "block";
document.getElementById("btn-menu").style.display = "none";
document.getElementById("background").style.display = "none"; 
document.querySelector("body").style.overflow ="none";


}

//close menu overlay, reveal background content again
function closeNav() {
document.querySelector('"body".style.overflow = "visible";
document.querySelector("body").style.background = "#fff";
document.getElementById("btn-menuclose").style.display = "none";
document.getElementById("btn-menu").style.display = "block";
document.getElementById("background").style.display = "none";  
document.querySelector("nav").style.display = "none";

}

---

我最近遇到了同样的问题，也是唯一有效的解决方案：

• 始终如一
• 跨越不同的设备和外形因素（iOS Safari是最难解决的问题）
• 满足所有要求（在弹出窗口中，主体不会滚动到顶部，在iOS Safari上没有奇怪的过度滚动和导航铬切换）

---

是一个javascript库。这不是纯粹的css（我怀疑目前是否存在这样的解决方案），但既然您已经有了在js中打开和关闭导航的方法，那么这不应该是一个问题。

我最近遇到了同样的问题，也是唯一有效的解决方案：

• 始终如一
• 跨越不同的设备和外形因素（iOS Safari是最难解决的问题）
• 满足所有要求（在弹出窗口中，主体不会滚动到顶部，在iOS Safari上没有奇怪的过度滚动和导航铬切换）

---

是一个javascript库。这不是纯粹的css（我怀疑目前是否存在这样的解决方案），但既然您已经有了在js中打开和关闭导航的方法，那么这应该不是一个问题。

您可以发布html和css吗？最好是在codebin或jsfiddle中？试试这个也许答案会有所帮助you@Nighthawk2730外部代码站点通常不赞成堆栈溢出。只有在SO的代码片段功能不足时才使用它们（这是很少见的）。啊，好的，谢谢，我没有意识到这一点@你能把html和css也贴出来吗？最好是在codebin或jsfiddle中？试试这个也许答案会有所帮助you@Nighthawk2730外部代码站点通常不赞成堆栈溢出。只有在SO的代码片段功能不足时才使用它们（这是很少见的）。啊，好的，谢谢，我没有意识到这一点@康涅索