-
Notifications
You must be signed in to change notification settings - Fork 46.4k
-
Notifications
You must be signed in to change notification settings - Fork 46.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Strange onScroll behaviour #15723
Comments
The syntax for adding event listener is this
The native event don't fire for the code you provide
But it will for this
I suspect behind the scenes, the React onScroll event does the addEventListener with useCapture set to true |
Sorry, you probably misunderstood me!
This is actually intended, this is correct behaviour I am expecting. It should not fire because there is no capturing.
So, if this is true then it is very unexpected! Why would it do this? |
Regarding my comment that I suspected the useCapture was set to true by React, I was speculating. The React scroll event was not added to the wrapper or child element. From the docs, it says we can read the nativeEvent https://reactjs.org/docs/events.html When I inspect what event listeners there are attached to the I got this
Maybe somebody else could give some more insight of how the EDIT: with arguments |
So you were right it actually use capturing! But for me it seems like a bug, or at least very unintuitive behavior. Isn't it? |
React is also about abstracting the DOM operations away from the developer. React will take care of the DOM operations in the fastest, safest, best performance, cross browser friendly, support most devices, etc. Disclaimer: I am speculating. I believe in this case, there is a strategy to use |
It is fine to use one event, I guess! But I don't understand how this event is useful when you need to make some checks by yourself, and that check can only be made by creating ref (for example you could compare target element with your container element). So if you creating ref anyway why would you use onScroll over native event? Why this check is not internal to React? I also have suspicion that it was't always like that, because I found out about this after I saw some strange behavior in production code which was't changed for several months! Going to check earlier versions of React later |
So can anybody confirm is this a bug or correct behaviour? |
I also encountered this problem, it makes me confused. Why parent elements can capture scroll event of children? |
Exactly! |
For native event, scroll event don't bubble unless target element is document, it's different from other events. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution. |
This behavior is still reproducible with current react 16.12.0 I am still not sure if this is expected or not |
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment! |
Bump, I guess. Need to check it with recent versions though |
Still happens with React 16.13.1 |
Maybe @sophiebits remembers some context around this? I think early on the decision was to consistently bubble all React events — even the ones that the browser doesn't bubble by default. |
Correct. This is “working as intended”, similar to onSubmit (but I wouldn’t make the same decision if I was designing React DOM today). As a workaround, you can check |
Hm, ok, thank you for the answer! Although it is very weird thing, basically it means that in every |
Yeah. It's a reasonable concern and the same reason bubbling media events in React are weird. It's not an easy change to make in terms of breakages so I don't know if we would ever do it, but feel free to file a proposal here: https://github.com/reactjs/rfcs. |
Ok, got it! Thank you for help. |
We're fixing this in 17. |
Wow, that's great to hear, thank you! |
FYI I still see this but I am on 16.*, so I assume once I move to 17 it will stop working. |
Do you want to request a feature or report a bug?
Possible bug
What is the current behavior?
onScroll callback on parent element fires when children element is scrolled.
Native listener is working as expected, though.
Example with reproduction
https://codesandbox.io/s/kk3th
Just try to scroll little box with items.
What is the expected behavior?
I am not sure if this behaviour is correct, but it was unexpected for me, so it might be a bug.
I was not expecting onScroll to fire at all.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "16.8.6"
macOs Mojave 10.14.5
Did not tried any other versions
The text was updated successfully, but these errors were encountered: