Skip to content

fix(useInfiniteScroll): support column-reverse scroll origins - #2986

Open
Jarvis636431 wants to merge 1 commit into
alibaba:masterfrom
Jarvis636431:fix/use-infinite-scroll-column-reverse-2948
Open

Jarvis636431 wants to merge 1 commit into
alibaba:masterfrom
Jarvis636431:fix/use-infinite-scroll-column-reverse-2948

Conversation

@Jarvis636431

Copy link
Copy Markdown

🤔 This is a ...

  • Bug fix
  • Site / documentation update
  • Test Case

🔗 Related issue link

Fixes #2948

💡 Background and solution

In a flex container with flex-direction: column-reverse, scrolling towards the list end produces a negative scrollTop. useInfiniteScroll treats that value as a normal positive offset, so automatic loading does not trigger correctly and restoring the position after prepending uses the wrong sign.

Detect flex/inline-flex column-reverse containers, normalize the scroll distance for the existing threshold and movement checks, and restore the signed offset after prepending. Loading continues to follow list order: bottom appends at the list end (visual top in a reversed column), while top prepends at the list start (visual bottom). Document this in English and Chinese. No new option, dependency or change to normal-layout list ordering.

Validation

  • Added 12 regression cases: 6 fail on unchanged master and all pass with this fix. Covers normal/reversed/block layouts, thresholds, movement direction, initial/restored positions, pending/no-more guards, resizing and layout changes.
  • Focused suites: 52 tests passed.
  • Full workspace tests, normal and REACT_MODE=strict: 96 files / 478 tests passed in each mode (Node 24.21.0).
  • Both packages' TypeScript checks passed; full workspace build passed (Node 24.3.0 / pnpm 10.12.4).
  • Real-browser comparison using bundled hook source reproduced missing loads on master and verified loading with the fix. Prepending three 50px rows restores reverse scrollTop from -20 to -170 with 0px anchor displacement, with browser scroll anchoring disabled. Normal-layout controls passed. Other browser engines and mobile devices were not tested.
  • Source coverage: 100% statements/functions/lines, 94.20% branches. Existing uncovered branches remain. Coverage emits the existing Vitest/coverage-provider version mismatch warning.
  • New test Biome check, source formatting and git diff --check passed. The source's existing exhaustive-dependencies lint error for isNoMore remains; that memo was not changed. Build emits existing toolchain warnings.

AI assistance was used for implementation and validation.

📝 Changelog

Language Changelog
🇺🇸 English Fix automatic loading and scroll-position restoration in useInfiniteScroll for column-reverse flex containers.
🇨🇳 Chinese 修复 useInfiniteScroll 在 column-reverse 弹性布局中的自动加载判断和滚动位置恢复。

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

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.

向上滚动无限加载use-infinite-scroll的源码内部缺少了对滚动原点的判断

1 participant