Add support for onScrollEnd event #26789

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

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

devongovett commented May 7, 2023

react-sizebot commented May 7, 2023 •

edited

Loading

devongovett commented May 30, 2023 •

edited

Loading

devongovett commented Oct 11, 2023 •

edited

Loading

gaearon commented Oct 11, 2023

sophiebits commented Oct 11, 2023

Add support for onScrollEnd event #26789

Add support for onScrollEnd event #26789

Conversation

devongovett commented May 7, 2023

Summary

How did you test this change?

react-sizebot commented May 7, 2023 • edited Loading

Critical size changes

Significant size changes

devongovett commented May 30, 2023 • edited Loading

devongovett commented Oct 11, 2023 • edited Loading

gaearon commented Oct 11, 2023

sophiebits commented Oct 11, 2023

react-sizebot commented May 7, 2023 •

edited

Loading

devongovett commented May 30, 2023 •

edited

Loading

devongovett commented Oct 11, 2023 •

edited

Loading