模式打開時擺脫正文頁面滾動

Question

我試圖添加類overflow: hidden; 到帶有javascript的body標簽以隱藏滾動，但這沒有發生。 我究竟做錯了什么？

我通過標記名稱獲取元素： var body = document.getElementsByTagName("body");

然后在觸發模態之后，我想添加類.no-scrolling { overflow: hidden; } .no-scrolling { overflow: hidden; }到body標簽。

var modal = document.getElementsByClassName("finance-modal")[0];
var btn = document.getElementsByClassName("finance-modal-btn")[0];
var span = document.getElementsByClassName("finance-modal-close")[0];
var body = document.getElementsByTagName("body");

btn.onclick = function() {
  modal.style.display = "block";
  body.classList.add("no-scrolling");
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

而且，它不起作用！

這是我的jsfiddle 。

Answer 1

這可能無法正常工作var body = document.getElementsByTagName("body"); 。 嘗試var body = document.body; 代替。

至於刪除滾動，則需要設置{overflow-y: hidden;}

Answer 2

完成！

var body = document.querySelector("body"); 做到了。

然后是：

var modal = document.getElementsByClassName("finance-modal")[0];
var btn = document.getElementsByClassName("finance-modal-btn")[0];
var span = document.getElementsByClassName("finance-modal-close")[0];
var body = document.querySelector("body");

btn.onclick = function() {
    modal.style.display = "block";
    body.classList.add("no-scrolling");
}
span.onclick = function() {
    modal.style.display = "none";
    body.classList.remove("no-scrolling");
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        body.classList.remove("no-scrolling");
    }
}