Question

我使用ReactJS创建了一个简历，该简历的主体具有 100vw 和 100vh 的尺寸，即，在窗口/主体级别没有滚动，但是在简历内部有一个包含滚动的组件。最后，我想创建一个粘性标题。但是在创建粘性标头之前，应先运行此代码。我尝试过：

componentDidMount() {
 ReactDOM.findDOMNode(this.refs.stickyHeader).addEventListener('scroll', this.isScrollOccured.bind(this));
}

componentWillUnmount() {
 ReactDOM.findDOMNode(this.refs.stickyHeader).removeEventListener('scroll', this.isScrollOccured.bind(this));
}

isScrollOccured() {
    console.log('Scrolling Occured');
}

render() {
    return (
        <div className="Container">
                        <div className="Header" ref="stickyHeader">
                        [...]
                        </div>
                </div>
                )
}

这没有给出任何响应，但是如果我在addEventListener内用 wheel 事件更改 scroll 事件，它可以正常工作，但是我不想使用滚轮。我检查了Other's Solution，但对我来说不起作用。帮我找出解决方案。如有必要，我将上传我的作品的Image.png。

Answer 1

refs API已更改。试试这个

  stickyHeader = React.createRef()
  componentDidMount() {
    this.stickyHeader.current.addEventListener(
      "scroll",
      this.isScrollOccured.bind(this)
    );
  }

  componentWillUnmount() {
    this.stickyHeader.current.removeEventListener(
      "scroll",
      this.isScrollOccured.bind(this)
    );
  }

  isScrollOccured() {
    console.log("Scrolling Occured");
  }

  render() {
    return (
      <div className="Container">
        <div className="Header" ref={this.stickyHeader}>
          [...]
        </div>
      </div>
    );
  }

您可以了解有关参考文献here的更多信息。

如何在React组件上添加滚动事件而不是在window对象上添加滚动事件？

1 个答案: