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

Question

我有一个导航组件，它隐藏了导航项，直到您滚动到视口(viewport)中的某个点。 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('仅屏幕和 (min-width: 768px)').matches

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

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