Skip to content

Fix inverted list wheel scrolling over its own surface - #2863

Open
huytdps13400 wants to merge 1 commit into
necolas:masterfrom
huytdps13400:fix/inverted-wheel-surface
Open

huytdps13400 wants to merge 1 commit into
necolas:masterfrom
huytdps13400:fix/inverted-wheel-surface

Conversation

@huytdps13400

@huytdps13400 huytdps13400 commented Oct 4, 2026 •

Copy link
Copy Markdown
Contributor

Wheel events over an inverted list's own padding or gutter are currently handled as if the scroller were a nested scrollable child. This applies the delta in the ordinary direction; near a boundary, the same element can receive writes in both directions.

Only treat the event target as a nested scrollable when it differs from the listener's currentTarget. The scroller then receives the full inverted delta, while genuine descendants continue consuming their portion first.

Fixes #2843.

Validation

  • Added 16 DOM-event regression/control tests across vertical and horizontal lists: positive/negative wheel deltas, the scroller surface near a boundary, ordinary row targets, nested scrollables with room or overflow, and non-inverted lists. On the base, 6 regression cases fail and 10 controls pass; all pass after the change.
  • Real mouse-wheel input in Chrome 153 on a rendered FlatList using React 18.3.1 reproduced the report: a gutter wheel of 120 moved the list +120, while the same wheel over a row moved it −120. After the fix, both move −120. Nested content still consumes 120 itself, and passes 110 to the inverted parent when only 10 remains available. Ten browser checks pass across explicit getItemLayout and measured layouts.
  • Full DOM and Node suites: 737 tests passed, 6 skipped, 220 snapshots passed. Lint, formatting and the library build pass.
  • Flow 0.148 cannot execute on this ARM host because its packaged macOS executable is x86_64 (spawn error −86), so Flow validation is unverified locally. The GitHub CI type-check, format, lint, unit-test, compressed-size and CodeSandbox checks have since all passed.

The existing cell-length clamp and the separate nested-inverted-list propagation proposal in #2772 are outside this change.

@codesandbox-ci

codesandbox-ci Bot commented Oct 4, 2026 •

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 403032f:

Sandbox Source
react-native-web-examples Configuration

@huytdps13400
huytdps13400 force-pushed the fix/inverted-wheel-surface branch from 0bb0be6 to 403032f Compare October 5, 2026 06:54

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Inverted VirtualizedList scrolls backwards when the wheel target is the scroller itself

1 participant