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存放在状态中，并用它来检查设备是否为移动设备。

禁用移动/较小屏幕设备的addEventListener

1 个答案: