代码之家 › 专栏 › 技术社区 › Mini

根据ie上的滚动位置更改状态

internet-explorer reactjs

Mini · 技术社区 · 6 年前

我需要通过滚动位置向div添加或删除类。所以我添加了一个侦听器来记录滚动事件以更改状态

componentDidMount() {
    document.addEventListener('scroll', function (event) {
      const isPassedTop = window.pageYOffset  > 100;
      if (isPassedTop !== this.state.isPassedTop) {
        this.setState({ isPassedTop: isPassedTop })
      }
    }, true);
}

我可以使用jquery在那里添加或删除一个类,但我正在寻找一种按状态执行的方法。有人知道怎么在跨浏览器上做吗?

1 回复 | 直到 6 年前

Evan Trimboli 6 年前

最好的方法是创建一个绑定函数,以便以后可以引用它以在卸载时删除侦听器,如下所示:

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleScrollChange = this.handleScrollChange.bind(this);
  }    

  handleScrollChange() {
    const isPassedTop = window.pageYOffset  > 100;
    if (isPassedTop !== this.state.isPassedTop) {
      this.setState({ isPassedTop: isPassedTop })
    }
  }

  componentDidMount() {
    document.addEventListener('scroll', this.handleScrollChange, true);
  }

  componentWillUnmount() {
    document.removeEventListener('scroll', this.handleScrollChange);
  }
}

推荐文章