Scroll event getting fired on top element as well as on the bottom element

Question

I'm using AutoSizer for one of the use cases in my application. in Autosizer code, they change the scrollTop due to which the scroll event is getting triggered. As the scroll events are captured (and not bubbled), how do I prevent scroll event in AutoSizer (or restrict the event only to the desired element)? The one way I could find is, checking if the target and currentTarget is same in the event handler

onScroll = event => {
    if(event.target === event.currentTarget){
        ...do Something
    }
}

Is this the right way to do it or there is some other way? P.S. I'm using react in my application

score 0 · Answer 1 · answered May 08 '19 at 10:32

0

If I understood you correctly you want to prevent scrolling on a parent component if child component has been scrolled. If yes, so use e.stopPropagation(); for it.

onScroll = event => {
    event.stopPropagation();
    // ...do Something
}

answered May 08 '19 at 10:32

Shamil Mammadov

79
6

But the scroll event is captured and not bubbled. In that case, stopPropagation doesn't make any sense – Ajay Gaur May 08 '19 at 10:32
@AjayGaur, then, your solution is correct. I would use the same. [useful link](https://javascript.info/bubbling-and-capturing) – Shamil Mammadov May 08 '19 at 11:42

Scroll event getting fired on top element as well as on the bottom element

1 Answers1