2 minute read
all its events before React 17, even the ones that the browser doesn’t bubble by default.
This has caused some weird behavior #19156#15723 with scroll event.
To demonstrate one of the issues let’s take a simple example.
A scrollable div containing some text is wrapped by parent div.
The parent div has onScroll event attached to it which changes the background color to pink.
When we scroll in the child div, we can see that the background color changes to pink as shown in the below gif.
This is strange.
The reason behind this is that the scroll event of child div bubbles, calling the onScroll event of the parent which changes the background color.
With React 16 or lower, the scrolling issue could be fixed by adding a condition as below -
This approach is not feasible if the hierarchy increases.