отключить 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

Приведенный выше код вернет true, если окно меньше 768 пикселей, то есть IE меньше планшета.

Тогда вы можетесохраните isMobile в состоянии и используйте его, чтобы проверить, является ли устройство мобильным.