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

我正在使用class中的header通过setState将addEventListener添加到componentDidMount。 state的scrolling在false的0处设置为scrollY，并在滚动时将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 layout中。当用户返回页面顶部时，它在页面和模板之间完美地工作。

但是，在某些情况下，例如通过route更改modal或用户在浏览器上回击时，动作将保持先前的scrollY位置。

在这种情况下，scrollY不是0，但是state的scrolling仍显示为false。我想这是因为即使scrollY显示了实际位置，state scrolling最初还是false直到用户滚动。这在console中描述

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

最佳答案

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

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