为移动/小屏幕设备禁用 addEventListener

Question

我有一个导航组件，它具有隐藏的导航项，直到您滚动到视口中的某个点。isTop寻找页面上的位置，一旦到达导航项目就会淡入。在手机或平板电脑菜单上，我希望它们始终可见。

有没有一种方法可以检测用户是否在较小的屏幕上，如果是，您可以禁用事件侦听器？

片段：

componentDidMount() {

  this.updateWindowDimensions();

  window.addEventListener('resize', this.updateWindowDimensions);

  document.addEventListener('scroll', () => {

    const isTop = window.scrollY < window.innerHeight - 50;

    if (isTop !== this.state.isTop) {

      this.setState({ isTop })

    }

  });

}

<NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>

  <NavLink className="active" href="/">Home</NavLink>

</NavItem>

<NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>

  <NavLink href="/option">Option</NavLink>

</NavItem>

<NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>

  <NavLink href="/option2">Option 2</NavLink>

</NavItem>