为移动/小屏幕设备禁用 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>

Answer 1

我认为您可以用来window.matchMedia查看窗口是否匹配（或不匹配）某个宽度。以你的情况为例：

const isMobile = !window.matchMedia('only screen and (min-width: 768px)').matches

如果窗口小于 768px（即小于平板电脑的 IE），上面的代码将返回 true。

然后，您可以存储isMobile状态并使用它来检查设备是否是移动设备。