javascript - 卡住背景滚动的 CSS 叠加菜单

Question

是否可以创建一个 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";  
}

Answer 1

当 overflow:visible 关闭时，将 overflow:none 添加到 body。

// 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";

}