how to add event listener (onScroll) to every element inside a specific div in react?

Question

How can I add onScroll event listener to every element inside a specific div? (e.g. div with class: "add-event-listener-to-every-element-in-me" as you can see below.

in the example below there are only 2 elements inside the div so off course i could just add it manually but in my code there are hundreds of elements.

 <div className="add-event-listener-to-every-element-in-me">
    <div className: "i-have-the-event-listener">
      <p className: "i-have-the-event-listener" ></p>
      <div className: "i-have-the-event-listener"></div>
</div>
 </div>

Answer 1

Use querySelectorAll

document.querySelectorAll(".add-event-listener-to-every-element-in-me .i-have-the-event-listener").each( () => this.addEventListener("scroll", myScrollEventFunc));