scrollIntoView does not fully reveal item if scroll element's client size and offset size are different

[ccblaisdell]

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.