复选框勾选时锁定页面滚动问题求助

嘿，我一眼就看到你代码里的关键问题啦！核心是事件监听的绑定方式错了，还有一些细节没考虑到，让我一步步给你讲清楚：

问题根源：错误的事件绑定写法 #

你在两种代码里都写了：

modalToggle.addEventListener('click', isOpen());

这里的isOpen()是立即执行函数——页面一加载就会跑一次这个函数，但并不会把它绑定成点击事件的回调。正确的写法是直接传函数本身（不带括号）：isOpen。

修正第一种方案（锁定body滚动） #

除了绑定方式，你还漏掉了关闭模态框时恢复滚动的逻辑，不然打开一次后页面就永远不能滚动了。修正后的代码：

var modalToggle = document.getElementById('vids'); 
function isOpen() { 
  if(modalToggle.checked === true) { 
    document.body.style.overflow = "hidden"; 
  } else {
    document.body.style.overflow = "auto"; // 恢复默认滚动行为
  }
} 
modalToggle.addEventListener('click', isOpen); // 这里去掉括号！

修正第二种方案（隐藏长div） #

同样是绑定方式的问题，加上关闭时恢复显示的逻辑：

var modalToggle = document.getElementById('vids'); 
var space = document.getElementById('space'); 
function isOpen() { 
  if(modalToggle.checked === true) { 
    space.style.display = "none"; 
  } else {
    space.style.display = "block"; // 关闭模态框时重新显示
  }
} 
modalToggle.addEventListener('click', isOpen); // 去掉括号

额外小建议：用CSS类控制更优雅 #

其实更推荐用切换CSS类的方式来控制，把样式和JS逻辑分开，维护起来更方便：

1. 先在CSS里加一个类：

.modal-open {
  overflow: hidden;
}

2. 然后JS里只需要切换这个类：

var modalToggle = document.getElementById('vids'); 
modalToggle.addEventListener('click', function() {
  document.body.classList.toggle('modal-open');
});

这样不管是打开还是关闭模态框，一行代码就能搞定，是不是更清爽？

内容的提问来源于stack exchange，提问作者panrosmithe