當我在一個 div 中打開菜單時如何停止滾動？

Question

我正在創建一個彈出窗口。 當用戶單擊某個按鈕時，我想顯示一些錯誤消息。 所以當彈出窗口出現時，我希望背景停止滾動。 我怎么做？ 這是示例。 當我單擊“menubtn”時，它將顯示“菜單項”。 並且當“菜單項”變為活動狀態時，不應滾動背景。

<div class="first">
    <div class="menubtn">
        menubtn
    </div>
    <div class="menu">
        menu items
    </div>
</div>
<div class="second">
    second
</div>

在 HTML 中，我創建了兩個 div，當我單擊一個按鈕時，它會在第一個 div 處打開一個菜單。 CSS 代碼是這樣的。

.first,.second{
  height:100vh;
  font-size:50px;
  display:grid;
  place-content:center;
}

.menu{
  position:absolute;
  display:none;
}

.menu.active{
  display:flex;
}

然后我添加了 javascript 以在單擊按鈕時添加和刪除菜單。

const menubtn = document.getElementsByClassName("menubtn")[0];
const menuopen = document.getElementsByClassName("menu")[0];

menubtn.addEventListener("click", () => {
  menuopen.classList.toggle("active");
});

現在，當 menubtn 處於活動狀態時，我希望 div 停止滾動。

編輯：我認為我的問題不清楚。 該網站是多個頁面，如果我添加隱藏的正文溢出，那么當我關閉彈出按鈕時我無法滾動。 我要做的是僅在彈出窗口處於活動狀態時停止滾動，並在我關閉彈出窗口時再次滾動。

Answer 1

//在 javascript

`

menubtn.addEventListener("click", () => {

  menuopen.classList.toggle("active");
  document.querySelector("body").style.overflowY="hidden"
});

`

// 如果是dom

// 在 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ

.menubtn{ position：絕對 }

Answer 2

我編輯我的答案我使用 if 條件來檢查活動的 class 是否存在 如果不存在溢出是自動的，則隱藏溢出

 const menubtn = document.getElementsByClassName("menubtn")[0]; const menuopen = document.getElementsByClassName("menu")[0]; menubtn.addEventListener("click", () => { menuopen.classList.toggle("active"); if (menuopen.classList.contains('active')) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'auto'; } });

 .first,.second { height: 100vh; font-size: 50px; display: grid; place-content: center; }.menu { display: none; }.menu.active { display: flex; }

 <div class="first"> <div class="menubtn"> menubtn </div> <div class="menu"> menu items </div> </div> <div class="second"> second </div>

Answer 3

CSS： body { overflow: hidden; } body { overflow: hidden; }