`scrollIntoView` does not fully reveal item if scroll element's client size and offset size are different
ccblaisdell opened this issue · comments
Describe the bug
The virtualizer's scrollIntoView method does not fully scroll an item into view at the end of the block if the scroll element's client size and offset size are different. For example if the scroll element has a border or scrollbar.
Your minimal, reproducible example
https://codesandbox.io/p/devbox/tender-tom-z8876k
Steps to reproduce
This grid is forked from the official "Fixed" react example. Keyboard arrow navigation has been added, plus a 10px thick border on the scroll element.
Click onto a grid item to focus it, and then use the right or down arrow keys to navigate past the edge of the scroll container, you will find that the focused item does not get fully scrolled into view, but is partly obscured by the scroll element's border.
Expected behavior
As a user I expected the focused cell to be fully, but just barely, scrolled into view at the edge of the scroll element. Instead, it's partly cropped.
How often does this bug happen?
Every time
Screenshots or Videos
CleanShot.2023-12-11.at.15.30.05.mp4
Platform
macOS, chrome
tanstack-virtual version
3.0.1
TypeScript version
No response
Additional context
In another application I'm working on, the virtualizer does not account for the size of a scrollbar and exhibits the same defect.
This example can be repaired by overriding the virtualizers' scrollRect with the scroll element's clientWidth and clientHeight measurements. You can see this by uncommenting the code at the top of the onFocus handler on the items.
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.