constructor(props) {
  super(props);
  this.state = {
    scrollDirection: null
  };
}

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

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

handleScroll = () => {
  const scrollY = window.scrollY;
  if (scrollY > this.prevScrollY) {
    this.setState({ scrollDirection: 'down' });
  } else if (scrollY < this.prevScrollY) {
    this.setState({ scrollDirection: 'up' });
  }
  this.prevScrollY = scrollY;
}

render() {
  const { scrollDirection } = this.state;
  return (
    <div>
      {scrollDirection === 'down' && <p>向下滚动</p>}
      {scrollDirection === 'up' && <p>向上滚动</p>}
    </div>
  );
}