You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
anchorTo: 'end' loses the end when the scroll element shrinks #1297
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
Recording_before_480.mov
Expected
Recording_480.mov
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.
Activity