Question

我正在使用class中的header通过setState将addEventListener添加到componentDidMount。 state的{{1}}在scrolling的{{1}}处被设置为false，并且在滚动时，0被更新为scrollY并添加了state。

例如

true

在GatsbyJS 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 }); } };通过layout进行更改，或者用户在浏览器上回击时，动作将保持先前的route位置。

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

中对此进行了描述

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

Answer 1

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

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

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

1 个答案: