通过onclick

Question

我的汉堡菜单出现问题，打开背景页面时滚动。我注意到，如果在正文和html上添加“ overflow：hidden”，它可以解决此问题。但是，当我关闭菜单时，机身显然仍处于锁定状态。如何添加javascript以从正文和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属性集的HTML元素添加data-apply-fix事件监听器而起作用。这样，您可以将相同的行为附加到页面上的多个元素。

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

Answer 2

简单的方法是在点击侦听器上使用切换类，因为上面的代码可以：

var toggle = document.getElementsByClassName('navbar_toggle')[0];
var html = document.getElementsByTagName('html')[0];
var body = document.getElementsByTagName('body')[0];
var all = [html,body];

toggle.addEventListener( 'click', function() {
  for ( var i=0; i < all.length; i++ ) {
    all[i]classList.toggle('is-active');
  }
});

那么您的CSS应该是：

html, body {
  overflow: auto;
}

.is-active {
  overflow: hidden;
  position: fixed;  // prevent body scrolling for safari and ios
}

Answer 3

在nonscroll()函数中，您需要做两件事：

1. 检查nav是hidden还是shown。
2. 了解导航可见性后，可以更新body和html的样式。

---

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

<script>
    function nonscroll(elem) {
        // check if navbar is hidden or shown
        // if nav is hidden: "body overflow is 'hidden'"
        // else "body overflow is 'static'"
        var nav = document.getElementsByClassName("navbar_toggle");
        var nav_hidden = (window.getComputedStyle(nav[0]).visibility === "hidden")

        if(nav_hidden) {
            document.body.style.overflow = "hidden";
            document.html.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "static";
            document.html.style.overflow = "static";
        }
    }
</script>