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 · Accepted Answer · 2019-02-15 13:34:10Z

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, 2019 at 13:34

answered Feb 15, 2019 at 12:08

ManavM

3,1082 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

B4BIPIN Over a year ago

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.

ManavM Over a year ago

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.

B4BIPIN Over a year ago

Now an error is gone, but "scroll" is still not working. Only "wheel" is working.

ManavM Over a year ago

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

timothym Over a year ago

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.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related