如果 body 在滚动原生 javascript 上有一个类删除答案

【问题标题】：if body has a class remove on scroll native javascript如果 body 在滚动原生 javascript 上有一个类删除
【发布时间】：2014-03-26 18:05:18
【问题描述】：

我正在尝试使用本机 javascript，因此没有加载任何 jquery。我只想在 body 元素中创建一个 if 语句来 remove 一个类，前提是它有一个类。这样我就可以避免每次滚动时触发它。我基本上希望它仅在窗口正在滚动并且正文应用了此类时才删除该类，否则它不应该触发。

我尝试使用这段代码，它确实删除了类，但它总是在滚动时触发，无论 body 是否有一个类。在这种情况下......我看到控制台上的 scrollEvent 与我在页面上所做的每个滚动一起打印。您是如何完成这项工作的？

if(document.body.classList){

    window.addEventListener('scroll', function(){
        console.log('scrollEvent');

        document.body.classList.remove('mobile-menu-open');

    });
}

【问题讨论】：

标签： javascript if-statement scroll window removeclass

【解决方案1】：

你的 if 需要检查那个类

window.addEventListener('scroll', function(){
    console.log('scrollEvent');

    // do the following only if it has the class
    if( document.body.classList.contains('mobile-menu-open') ) {

       document.body.classList.remove('mobile-menu-open');

    }

});

【讨论】：

如果您在删除类后也删除侦听器，那么这个答案将是完美的:)
听起来类的存在是效果的触发器。所以我认为它可以重新添加，在这种情况下，进行布尔检查比每次都添加/删除事件处理程序更容易，也可能更有效。
我不同意，我想我会添加我自己的答案。
谢谢大家的回答，我学到了很多东西，无论我打开和关闭菜单多少次，Matt Pileggi 的答案都有效。 Skwal 的答案仅在第一次有效，但之后无法正常工作。
如果您有任何可以帮助我了解 nativa javascript 的链接，请这样做。我现在使用：blog.romanliutikov.com/post/63383858003/…，youmightnotneedjquery.com

【解决方案2】：

一旦你的类从body 中删除，你就可以删除监听器，这样滚动时它就不会再触发了。

代码如下：

var removeMenuClass = function() {
    document.body.classList.remove('mobile-menu-open');
    // remove the scroll listener
    window.removeEventListener('scroll', removeMenuClass, false);
}

// add the scroll listener
window.addEventListener('scroll', removeMenuClass, false);

如果需要（假设您的“移动菜单”重新打开时），您可以以相同的方式重新附加 eventListener。

【讨论】：

嘿，这似乎有效，但仅在第一个滚动中，该类被删除。如果我在打开导航后（因此再次添加了该类）并且我滚动该类仍保留在正文上。我怎样才能创建一个可持续的代码来检查身体上是否有一个类，如果有的话，如果有一个滚动就删除它。这有效，但奇怪的是只有一次。
写在我的回答里。您只需在菜单打开时重新附加事件侦听器。