Javascript 如何添加classname主体向下滚动？

我想在向下滚动100px时，在gatsby react上添加body

className=“showdiv”

我该怎么做

我尝试以下代码：

state = {
  isTop: true,
};

componentDidMount() {
  document.addEventListener('scroll', () => {
    const isTop = window.scrollY < 100;
    if (isTop !== this.state.isTop) {
        this.setState({ isTop })
    }
  });
}

但我不能增加身体类。我想提出一个新的简单的想法

---

谢谢

您可以像以前一样添加滚动侦听器，但是可以根据滚动位置从正文中添加/删除

showChildDiv

类

示例

class App extends React.Component {
  componentDidMount() {
    window.addEventListener("scroll", this.toggleBodyClass);
    this.toggleBodyClass();
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.toggleBodyClass);
  }

  toggleBodyClass = () => {
    if (window.scrollY < 100) {
      document.body.classList.add("showChildDiv");
    } else {
      document.body.classList.remove("showChildDiv");
    }
  };

  render() {
    return (
      <div
        style={{
          height: "1000px"
        }}
      />
    );
  }
}

类应用程序扩展了React.Component{
componentDidMount（）{
window.addEventListener（“滚动”，this.toggleBodyClass）；
this.toggleBodyClass（）；
}
组件将卸载（）{
removeEventListener（“滚动”，this.toggleBodyClass）；
}
toggleBodyClass=（）=>{
如果（window.scrollY<100）{
document.body.classList.add（“showChildDiv”）；
}否则{
document.body.classList.remove（“showChildDiv”）；
}
};
render（）{
返回(
);
}
}

您是否尝试过

window.addEventListener（'scroll'

相反？我不知道我是新来的，只是我想当我向下滚动100px时，添加body类名就是这个。@TholleSee@AlanFriedman谢谢你的回答，我如何在react中使用这个代码？javascript可以，但我不能在react上工作。你可以回答react JS代码我的问题吗？当然你可以在react中使用它。因为

body

不在y范围内我们的React root，您需要使用命令式JS来设置类。

class App extends React.Component {
  componentDidMount() {
    window.addEventListener("scroll", this.toggleBodyClass);
    this.toggleBodyClass();
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.toggleBodyClass);
  }

  toggleBodyClass = () => {
    if (window.scrollY < 100) {
      document.body.classList.add("showChildDiv");
    } else {
      document.body.classList.remove("showChildDiv");
    }
  };

  render() {
    return (
      <div
        style={{
          height: "1000px"
        }}
      />
    );
  }
}