Question

我正在尝试使用JavaScript将类overflow: hidden;添加到body标记中以隐藏滚动，但是这没有发生。我在做什么错了？

我通过标签名称获取元素： var body = document.getElementsByTagName("body");

然后在触发模态之后，我想将class .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");
    }
}

模式打开时摆脱正文页面滚动

2 个答案: