我有一个导航组件,该组件具有隐藏的导航项,直到您滚动到视口中的特定点为止。 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>
答案 0 :(得分:4)
我认为您可以使用window.matchMedia
来查看窗口是否匹配(或不匹配)特定宽度。以您的情况为例:
const isMobile = !window.matchMedia('only screen and (min-width: 768px)').matches
如果窗口小于768px,即IE小于平板电脑,则上面的代码将返回true。
然后您可以将isMobile
存放在状态中,并用它来检查设备是否为移动设备。