How to add scroll event on a React component instead of adding on window object?

Question

I used ReactJS to create a resume, that resume's body have 100vw and 100vh dimension ie, there is no scroll at window/body level, but inside resume there is one component which contains scroll. At the end I want to create a sticky Header. But before creating sticky header this code should run first. I tried this:

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>
                )
}

This is not giving any response, but if I change scroll event with wheel event inside addEventListener, it works fine, But I don't want to use wheel. I checked Other's Solution but it didn't work for me. Help me to find out the solution. If necessary I will upload Image.png of my work.

ManavM · Answer 1 · 2019-02-15T13:34:10.230

1

The refs API has changed. Try this instead

  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>
    );
  }

You can learn more about refs here.

edited Feb 15 '19 at 13:34

answered Feb 15 '19 at 12:08

ManavM

2,918
2
20
33

But this is not working, an error occurred : TypeError: Cannot read property 'addEventListener' of undefined at "this.stickyHeader.current.removeEventListener(" line. And if I remove current from the above code, then an error is not occurring but the code is also not working. – B4BIPIN Feb 15 '19 at 12:43
Sorry, that is my mistake. I used callback refs and createRef API at the same time. I have updated the answer. Sorry for the confusion. – ManavM Feb 15 '19 at 13:33
Now an error is gone, but **"scroll"** is still not working. Only **"wheel"** is working. – B4BIPIN Feb 15 '19 at 16:34
I'm not sure why that would happen...try finding out if 'scroll' is the only event malfunctioning...and if nothing works, I would suggest posting a new question on SO – ManavM Feb 15 '19 at 19:13
I've found I often have to use `setTimeout` along with `ref.current.addEventListener`, `current` is rarely immediately available. Also checking for the existence of `current` is likely helpful. – timothym Mar 18 '19 at 17:41
`Callback refs` is so interesting, but I can't make it work. – Francis Rodrigues Apr 20 '19 at 22:14
I'm trying to get element position on screen but it don't work. Can you help me? https://snag.gy/xVyPNC.jpg – Francis Rodrigues Apr 20 '19 at 22:15
@FrancisRodrigues You are using [findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode) incorrectly. If you look at the docs it takes a component not a ref as a parameter. you should try accessing the `scrollY` property on your `current` variable – ManavM Apr 21 '19 at 05:00
Thanks for your tip :) – Francis Rodrigues Apr 21 '19 at 15:35

How to add scroll event on a React component instead of adding on window object?

1 Answers1