Add support for onScrollEnd event by devongovett · Pull Request #26789 · facebook/react

devongovett · 2023-05-07T05:48:43Z

Summary

This adds support for the new scrollend event. It was recently added to the spec, and is currently supported in Firefox 109 and Chrome Canary (shipping in Chrome 114). You can read more about this event here. This PR adds support for the onScrollEnd prop, following the implementation for onScroll.

How did you test this change?

Added unit tests.

packages/react-dom-bindings/src/events/ReactDOMEventListener.js

react-sizebot · 2023-05-07T05:59:39Z

Comparing: be67db4...fffb913

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.11%	174.46 kB	174.66 kB	+0.06%	54.27 kB	54.30 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.11%	176.42 kB	176.61 kB	+0.07%	54.90 kB	54.94 kB
facebook-www/ReactDOM-prod.classic.js	+0.07%	565.07 kB	565.49 kB	+0.06%	99.46 kB	99.52 kB
facebook-www/ReactDOM-prod.modern.js	+0.08%	548.80 kB	549.21 kB	+0.06%	96.54 kB	96.60 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against fffb913

devongovett · 2023-05-30T20:20:11Z

This is shipping in stable chrome today. Would be awesome to get it supported in React too!

devongovett · 2023-10-11T02:07:19Z

🏓 Is there anything blocking this? It's now shipping in both Firefox and Chromium.

gaearon · 2023-10-11T02:16:53Z

lgtm but my account lost merge rights 😅 @sophiebits?

sophiebits · 2023-10-11T04:01:04Z

Thanks! Sorry for the long wait Devon.

## Summary This adds support for the new [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) event. It was recently added to the spec, and is currently supported in Firefox 109 and Chrome Canary (shipping in Chrome 114). You can read more about this event [here](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/). This PR adds support for the `onScrollEnd` prop, following the implementation for `onScroll`. ## How did you test this change? Added unit tests. DiffTrain build for [537228f](537228f)

## Summary This adds support for the new [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) event. It was recently added to the spec, and is currently supported in Firefox 109 and Chrome Canary (shipping in Chrome 114). You can read more about this event [here](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/). This PR adds support for the `onScrollEnd` prop, following the implementation for `onScroll`. ## How did you test this change? Added unit tests.

…experimental prefix for server action APIs (#56809) The latest React canary builds have a few changes that need to be adopted for compatability. 1. the `useFormState` and `useFormStatus` hooks in `react-dom` and the `formData` opiont in `react-dom/server` are no longer prefixed with `experimental_` 2. server content (an undocumented React feature) has been removed. Next only had trivial intenral use of this API and did not expose a coherent feature to Next users (no ability to seed context on refetches). It is still possible that some users used the React server context APIs which is why this should go into Next 14. ### React upstream changes - facebook/react#27513 - facebook/react#27514 - facebook/react#27511 - facebook/react#27508 - facebook/react#27502 - facebook/react#27474 - facebook/react#26789 - facebook/react#27500 - facebook/react#27488 - facebook/react#27458 - facebook/react#27471 - facebook/react#27470 - facebook/react#27464 - facebook/react#27456 - facebook/react#27462 - facebook/react#27461 - facebook/react#27460 - facebook/react#27459 - facebook/react#27454 - facebook/react#27457 - facebook/react#27453 - facebook/react#27401 - facebook/react#27443 - facebook/react#27445 - facebook/react#27364 - facebook/react#27440 - facebook/react#27436 --------- Co-authored-by: Zack Tanner <zacktanner@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im>

## Summary This adds support for the new [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) event. It was recently added to the spec, and is currently supported in Firefox 109 and Chrome Canary (shipping in Chrome 114). You can read more about this event [here](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/). This PR adds support for the `onScrollEnd` prop, following the implementation for `onScroll`. ## How did you test this change? Added unit tests.

## Summary This adds support for the new [scrollend](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event) event. It was recently added to the spec, and is currently supported in Firefox 109 and Chrome Canary (shipping in Chrome 114). You can read more about this event [here](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/). This PR adds support for the `onScrollEnd` prop, following the implementation for `onScroll`. ## How did you test this change? Added unit tests. DiffTrain build for commit 537228f.

We added support for `onScrollEnd` in #26789 but it only works in Chrome and Firefox. Safari still doesn't support `scrollend` and there's no indication that they will anytime soon so this polyfills it. While I don't particularly love our synthetic event system this tries to stay within the realm of how our other polyfills work. This implements all `onScrollEnd` events as a plugin. The basic principle is to first feature detect the `onscrollend` DOM property to see if there's native support and otherwise just use the native event. Then we listen to `scroll` events and set a timeout. If we don't get any more scroll events before the timeout we fire `onScrollEnd`. Basically debouncing it. If we're currently pressing down on touch or a mouse then we wait until it is lifted such as if you're scrolling with a finger or using the scrollbars on desktop but isn't currently moving. If we do get any native events even though we're in polyfilling mode, we use that as an indication to fire the `onScrollEnd` early. Part of the motivation is that this becomes extra useful pair for #32422. We also probably need these events to coincide with other gesture related internals so you're better off using our polyfill so they're synced.

We added support for `onScrollEnd` in #26789 but it only works in Chrome and Firefox. Safari still doesn't support `scrollend` and there's no indication that they will anytime soon so this polyfills it. While I don't particularly love our synthetic event system this tries to stay within the realm of how our other polyfills work. This implements all `onScrollEnd` events as a plugin. The basic principle is to first feature detect the `onscrollend` DOM property to see if there's native support and otherwise just use the native event. Then we listen to `scroll` events and set a timeout. If we don't get any more scroll events before the timeout we fire `onScrollEnd`. Basically debouncing it. If we're currently pressing down on touch or a mouse then we wait until it is lifted such as if you're scrolling with a finger or using the scrollbars on desktop but isn't currently moving. If we do get any native events even though we're in polyfilling mode, we use that as an indication to fire the `onScrollEnd` early. Part of the motivation is that this becomes extra useful pair for #32422. We also probably need these events to coincide with other gesture related internals so you're better off using our polyfill so they're synced. DiffTrain build for [605a880](605a880)

Add support for onScrollEnd event

cd2aa67

facebook-github-bot added the CLA Signed label May 7, 2023

devongovett commented May 7, 2023

View reviewed changes

packages/react-dom-bindings/src/events/ReactDOMEventListener.js Outdated Show resolved Hide resolved

devongovett added 2 commits May 30, 2023 21:55

Use default priority

9c438c2

Merge branch 'main' into scrollend

c46b8a5

Merge branch 'main' into scrollend

fffb913

sophiebits merged commit 537228f into facebook:main Oct 11, 2023

gnoff mentioned this pull request Oct 13, 2023

Update React from d900fadbf to 09fbee89d. Removes server context and experimental prefix for server action APIs vercel/next.js#56809

Merged

sebmarkbage mentioned this pull request Feb 19, 2025

Polyfill onScrollEnd Event in Safari #32427

Merged

eps1lon mentioned this pull request Mar 19, 2025

fix(@types/react): add missing onScrollEnd event DefinitelyTyped/DefinitelyTyped#72078

Merged

fossabot bot mentioned this pull request Oct 2, 2025

Bump react and @types/react in /web-app franchb/console#14

Open

fossabot bot mentioned this pull request Oct 20, 2025

chore(deps): bump react and @types/react blinklabs-io/after-town-hall#281

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for onScrollEnd event#26789

Add support for onScrollEnd event#26789
sophiebits merged 4 commits intofacebook:mainfrom
devongovett:scrollend

devongovett commented May 7, 2023

Uh oh!

Uh oh!

react-sizebot commented May 7, 2023 •

edited

Loading

Uh oh!

devongovett commented May 30, 2023 •

edited

Loading

Uh oh!

devongovett commented Oct 11, 2023 •

edited

Loading

Uh oh!

gaearon commented Oct 11, 2023

Uh oh!

sophiebits commented Oct 11, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

devongovett commented May 7, 2023

Summary

How did you test this change?

Uh oh!

Uh oh!

react-sizebot commented May 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Critical size changes

Significant size changes

Uh oh!

devongovett commented May 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

devongovett commented Oct 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaearon commented Oct 11, 2023

Uh oh!

sophiebits commented Oct 11, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

react-sizebot commented May 7, 2023 •

edited

Loading

devongovett commented May 30, 2023 •

edited

Loading

devongovett commented Oct 11, 2023 •

edited

Loading