How to catch the scroll to the desired element in React?

Question

React

Hey! In a react application, there is a long list of elements on the page. How can I catch the scroll to each element of the list? Let's say the scroll can be listened to like this:

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

But what's next? how to check that scrolled to the next element?

Answer 1

how to check that scrolled to the next element?

Compare the position of the scroll and this element on the page. What is the specific question?

Let's say the scroll can be listened to like this:

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

It is better to use the Intersection Observer for this , where it is available.