react里面如何判断鼠标滚动方向！！！

产品他们有个需求就是，在页面上往下滚动的时候隐藏头部的导航栏，鼠标向上就显示该导航栏，这里有两个点要注意，第一是滚动的是哪个容器，react怎么监听滚动事件，其实也不难，需要慢慢调试。上代码：

componentDidMount() {
    var isFirefox = navigator.userAgent.indexOf('Firefox') !== -1
    //Firefox事件：DOMMouseScroll、IE/Opera/Chrome事件：mousewheel
    var mousewheel = isFirefox ? 'DOMMouseScroll' : 'mousewheel'
    this.refs.myPageContain.getPageDom().addEventListener(mousewheel, this.handleScroll)
}

看下我绑在哪里的

<Page inner className={styles.previewContainer} ref="myPageContain">

因为我滚动的容器是在page里面，但是page是一个组件，是拿不到的dom节点的，所以你会发现为啥有个getPageDom()的方法，其实这个是page组件里面的，

export default class Page extends Component {
  render() {
    const { className, children, loading = false, inner = false } = this.props
    const loadingStyle = {
      height: 'calc(100vh - 184px)',
      overflow: 'hidden',
    }
    return (
      <div
        className={classnames(className, {
          [styles.contentInner]: inner,
        })}
        style={loading ? loadingStyle : null}
        ref="myPage"
      >
        {loading ? <Loader spinning /> : ''}
        {children}
      </div>
    )
  }
  getPageDom = () => {
    const pageDom = this.refs.myPage || undefined
    return pageDom
  }
}

所以你如果绑定在一般的div上的话可以直接监听，不用在调getPageDom()这个方法，然后就是说说监听的那个函数

handleScroll = event => {
    var isFirefox = navigator.userAgent.indexOf('Firefox') !== -1
    if (isFirefox) {
      if (event.detail > 0) {
        this.setState({
          mouseDown: true,
        })
      } else {
        this.setState({
          mouseDown: false,
        })
      }
    } else {
      if (event.wheelDelta > 0) {
        this.setState({
          mouseDown: true,
        })
      } else {
        this.setState({
          mouseDown: false,
        })
      }
    }
  }

火狐和其他浏览器有兼容性问题，然后使用到的字段不一样，最后直接根据this.state.mouseDown的值去做对应操作就行