anchorTo: 'end' loses the end when the scroll element shrinks
維護者通常 1 天內回覆
評估
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 新手友好度
- 68/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- typescript
- 領域
- frontend
研究方向
Start in packages/virtual-core where anchorTo: 'end' scroll adjustments and the resize handling live, and compare how an item growing is compensated versus how scroll-element size changes are handled. Reproduce using the chat e2e page in packages/react-virtual/e2e/app/chat/main.tsx on branch langleyd/virtual:fix/end-anchor-scroll-element-resize, which has a control that shrinks the container. Done means an end-pinned viewport stays pinned after the container shrinks, verified by the existing e2e suite plus a new case for container resize.
由索引模型根據 Issue 內容生成。
描述
Describe the bug
With anchorTo: 'end', a viewport pinned to the end stays pinned when the last item grows, but not when the scroll element itself gets shorter, for example when the window is resized or the app changes the element's height. The browser keeps scrollTop, so the newest items end up below the fold by the amount the element shrank.
In a chat application this be an element being displayed on the page(say a banner above or below the scroll element) that causes the scroll element to shrink. The effect being the users losing the their place and not seeing the most recent message.
Your minimal, reproducible example
The chat e2e page on langleyd/virtual, branch fix/end-anchor-scroll-element-resize, has a control that shrinks the scroll container: packages/react-virtual/e2e/app/chat/main.tsx.
Steps to reproduce
- Render an end-anchored list and scroll to the end.
- Reduce the scroll element's height, or resize the window when it is sized from the viewport.
- The last items are now below the fold.
Expected behavior
An end-pinned viewport stays pinned to the end, as it does when an item grows.
How often does this bug happen?
Every time
Screenshots or Videos
Currently
https://github.com/user-attachments/assets/d420fad5-7bef-426e-9d10-f72125c80fbf
Expected
https://github.com/user-attachments/assets/58152695-83aa-4da8-9e49-12c422de0499
Platform
any browser. Seen in Chrome on macOS.
tanstack-virtual version
3.17.11
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- 主要語言
- TypeScript
- 星號
- 7.2k
- 分支
- 484
- 平均合併
- 15 小時 38 分鐘
- 30 天內合併 PR
- 47
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
TanStack/virtual 的其他 Issue
-
svelte-virtual renders no rows when the scroll element is bound after the store subscribes可能已有人在做 @clean99 於 1 天前認領。 未關閉
難度 4/5 1-2 天 新手友好度 35/100
維護者通常 1 天內回覆
-
anchorTo: 'end' does not keep the reading position when only paddingStart changes可能已有人在做 @duongynhi000001-crypto 於 1 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 30/100
維護者通常 1 天內回覆
-
marko-virtual: scrollToEnd during an in-flight prepend strands the view one prepend above the bottom (chat-pretext e2e fails on CI)可能已有人在做 @officialasishkumar 於 3 天前認領。 未關閉
難度 4/5 3-5 天 新手友好度 55/100
維護者通常 1 天內回覆
-
難度 4/5 3-5 天 新手友好度 42/100
TanStack/virtual#1252 · 2 則留言 ·
維護者通常 1 天內回覆
-
eslint-plugin-react-hooks v7 warning for useVirtualizer: Compilation Skipped: Use of incompatible library可能已有人在做 關聯的 PR 仍在進行中或已合併。 未關閉
難度 4/5 3-5 天 新手友好度 45/100
TanStack/virtual#1119 · 11 則留言 · 32 個 reaction ·
維護者通常 1 天內回覆
相似的 Issue
-
area: web bug
難度 2/5 1-3 小時 新手友好度 76/100
kinqsradio/orbyn-engineering#227 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 85/100
joeldesante/TurfBuilder#258 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 78/100
ncecere/open-mcp-portal#85 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 63/100
loathers/garbage-collector#2865 ·
維護者通常 1 天內回覆
-
test-reliability
難度 2/5 1-3 小時 新手友好度 78/100
Azure/azure-sdk-for-js#40672 · 1 個 reaction ·
維護者通常 1 天內回覆