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.
To avoid such issues, React 17 has stopped bubbling for a scroll event.
It now aligns with the browser scroll event.
With React 17 changes, scrolling the paragraph in our example would not change the background color to pink as shown in the below gif which fixes our issue.
Check out the pull request to learn more.