react-向后滑动导航不会触发

import React, { Component } from 'react';

class ScrollableNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showNav: true,
      prevScrollPos: window.pageYOffset,
    };
  }

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

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

  handleScroll = () => {
    const { prevScrollPos } = this.state;
    const currentScrollPos = window.pageYOffset;
    const scrollDelta = currentScrollPos - prevScrollPos;

    if (scrollDelta > 0) {
      // 向下滚动
      this.setState({ showNav: false });
    } else {
      // 向上滚动
      this.setState({ showNav: true });
    }

    this.setState({ prevScrollPos: currentScrollPos });
  };

  render() {
    const { showNav } = this.state;

    return (
      <nav className={showNav ? 'show' : 'hide'}>
        {/* 导航内容 */}
      </nav>
    );
  }
}

export default ScrollableNav;