javascript - 当scrollY不为0时，window.addEventListener不会更新路由更改的状态

Question

我正在使用 componentDidMount 中的 addEventListener 通过 setState 将 class 添加到 header >。 scrolling 的 state 在 scrollY 的 0 和滚动时设置为 false ，state 更新为 true 并添加 class。

举个例子

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = () => {
  if (window.scrollY === 0 && this.state.scrolling === true) {
    this.setState({ scrolling: false });
  } else if (window.scrollY !== 0 && this.state.scrolling !== true) {
    this.setState({ scrolling: true });
  }
};

在 GatsbyJS 布局内。当用户返回到页面顶部时，它在页面和模板之间完美运行。

但是，在某些情况下，例如route通过modal更改或用户在浏览器上点击返回，操作是保留之前的scrollY位置。

在这种情况下，scrollY不是0，但scrolling的state仍然显示false 。我想这是因为即使 scrollY 显示实际位置，state scrolling 最初是 false 直到用户卷轴。这是在控制台

中描述的

如何确保在路线更改时，如果 scrollY 为 state scrolling 更新为 true不是0？

Answer 1

您应该在实例化时运行一次 handleScroll 方法以捕获初始状态。现在，您依赖于位于最顶部的滚动位置，但正如您所发现的，返回历史记录会导致不同的初始状态。

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
  this.handleScroll();
}