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

时间:2019-06-13 13:18:30

标签: javascript reactjs gatsby

我有一个导航组件,该组件具有隐藏的导航项,直到您滚动到视口中的特定点为止。 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>

1 个答案:

答案 0 :(得分:4)

我认为您可以使用window.matchMedia来查看窗口是否匹配(或不匹配)特定宽度。以您的情况为例:

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

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

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