addEventListener on element other than window

[Yehudamoskowitz]

I have a parent element with overflow:auto. Therefore the scrolling event is triggered on this element and not on the window, so the child TrackVisibility components do not update on scroll. Can the scroll eventListener somehow be added to the parent element?

[oskarleonard]

Hmm, i guess it would be possible to extend the api with an eventListenerElement prop?

<TrackVisibility
  eventListenerElement={document.getElementById('MyElement')}
</TrackVisibility>

constructor(props) {
  this.eventListenerElement = props.eventListenerElement || window;
}
attachListener() {
  this.eventListenerElement.addEventListener("scroll", this.throttleCb);
  this.eventListenerElement.addEventListener("resize", this.throttleCb);
}

---

Or pass id to an element and do document.getElementById('ElementId') in TrackVisibility component

<TrackVisibility
  ElementId="ElementId"
</TrackVisibility>

  componentDidMount() {
    this.eventListenerElement = document.getElementById(this.props.ElementId);
    this.attachListener();
    setTimeout(this.isComponentVisible, 0);
  }

[sjaugmented]

Bump. Similar issue here. I've got my components in a sidebar with overflow-y: scroll and isVisible is always true.