Question

我有一个覆盖屏幕的主图像，当我滚动一点时，我想将其删除。我不希望它回来，直到您重新加载页面。我已经尝试了许多选项，包括react-reveal和react-headroom，但是我无法让它们按我的意愿工作。谢谢

Answer 1

一个简单的答案是侦听滚动事件并设置一个状态，在此状态下您将使用渲染功能。

class App extends React.Component {
  state = {
    scrolled: false,
  }

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

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

  handleScroll = () => this.setState({ scrolled: true });

  render() {
    return (
      <div>
        {!this.state.scrolled && <img src="..." />}
      </div>
    );
  }
}

如果这对您有用，那么您将已经滚动事件监听器以免以后出现性能问题，就可以将其删除：

handleScroll = () => {
  window.removeEventListener('scroll', this.handleScroll);
  this.setState({ scrolled: true });
}

反应整个页面图像，向下滚动时消失，向上滚动时不返回

1 个答案: