javascript - 通过 onclick 添加样式到 html 和 body

Question

我的汉堡菜单有问题，我的背景页面在打开时滚动。我注意到，如果我将“overflow:hidden”添加到正文和 html 中，它就可以解决问题。然而，当我关闭菜单时，主体显然仍然处于锁定状态。如何添加 JavaScript 来取消 body 和 html 中的这些样式？

这是我尝试过的:

<div class="navbar_toggle" onclick="nonscroll(this)">

<script>

 function nonscroll(elem) {
    document.body.style.overflow = "hidden";
    document.html.style.overflow = "hidden";
}
</script>

当我单击按钮时，我希望应用这些样式。当我关闭菜单时，我希望它们消失。有没有一个非常简单的方法来解决这个问题？

Answer 1

解决方案

复制此示例，粘贴到您的页面中:

function FixScrollToggle (node) {
  var target = document.body;
  
  function isClicked () {
    return target.classList.contains('fixScrollToggle--on');
  }
  
  function freeze() {
    target.classList.add('fixScrollToggle--on');
  }
  
  function unFreeze() {
    target.classList.remove('fixScrollToggle--on');
  }
  
  
  function onClick (e) {
    if (isClicked()) { return unFreeze(); }
    return freeze();
  }
  
  node.addEventListener('click', onClick, false);
}

document.addEventListener('DOMContentLoaded', function () {
  Array.prototype.slice.
    call(document.querySelectorAll('[data-apply-fix]')).
    forEach(FixScrollToggle);
});

.fixScrollToggle--on {
  overflow: hidden;
  background-color: #c00;
 }

<div class="navbar_toggle" data-apply-fix>Click me</div>

这不是最简单的方法，但它是干净且相对简单的方法。只需将JS代码放入 <script>页面中的标签。

<小时/>

说明

此代码的工作原理是添加 click每个具有 data-apply-fix 的 HTML 元素的事件监听器属性集。这样，您就可以将相同的行为附加到页面上的多个元素。

操作 CSS 的行为完全由 CSS 类 fixScrollToggle--on 完成。 。这样，您就可以非常清晰地分离关注点。