Question

我正在一个reactjs项目上，想知道如何将ScrollY px的值更改为vh之类的东西。

state = {
  isTop: true,
};

componentDidMount() {
  document.addEventListener('scroll', () => {
    const isTop = window.scrollY < 100;
    if (isTop !== this.state.isTop) {
        this.setState({ isTop })
    }
  });
}

我要添加/删除课程的地方：

<NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
  <NavLink href="/">Logos</NavLink>
</NavItem>

现在我在100px之后添加一个类。但是，可以在滚动100vh或视口高度后添加类吗？

Answer 1

window.outerHeight是您遇到此问题时要查找的内容。

解决方案：

constructor(props) {
  super(props);

  this.state = {
    width: 0, 
    height: 0
  };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

state = {
  isTop: true,
};

componentDidMount() {
  this.updateWindowDimensions();
  window.addEventListener('resize', this.updateWindowDimensions);
  document.addEventListener('scroll', () => {
    const isTop = window.scrollY < window.innerHeight;
    if (isTop !== this.state.isTop) {
        this.setState({ isTop })
    }
  });
}

componentWillUnmount() {
  window.removeEventListener('resize', this.updateWindowDimensions);
}

updateWindowDimensions() {
  this.setState({ width: window.innerWidth, height: window.innerHeight });
}

100vh之后ScrollY addclass

1 个答案: