Modify scrollToIndex when item larger than viewport

[jackhodkinson]

I am working with a case where items are often larger than the viewport. In that case the default behavior of Scroller._scrollToIndex(index, { align: 'nearest'}) is undesired. When scrolling to an item below the viewport it results in align = "end" which feels un-natural because it skips past the beginning of the item.

I recognize the desired behavior may be subjective, so if you'd prefer to keep the existing code I'd like to expose VirtualStore._getItemSize in the VirtualizerHandle:

export interface VirtualizerHandle {
  ...
  getItemSize(index: number): number;
  ...
}

Or if you are open to changing the default behavior I'd suggest modifying Scroller._scrollToIndex to take into account the item size and viewport size when align === "nearest":

export const createScroller(
    ...
    _scrollToIndex(index, { align, smooth, offset = 0 } = {}) {
      index = clamp(index, 0, store._getItemsLength() - 1);

      if (align === "nearest") {
        const itemOffset = store._getItemOffset(index);
        const scrollOffset = store._getScrollOffset();
        if (itemOffset < scrollOffset) {
          align = "start";
        } else if (
          itemOffset + store._getItemSize(index) >
          scrollOffset + store._getViewportSize()
        ) {
          if (store._getItemSize() > store._getViewportSize()) {
            align = "start"
          } else {
            align = "end"
          }
        } else {
          // already completely visible
          return;
        }
      }
      ...
    }
    ...
)

Let me know what you think! Thanks as always for maintaining such an awesome library.

[inokawa]

Hi, thank you for the suggestion. I think adding getItemSize to the handle is OK, because some virtualizers(ex. vue-virtual-scroll-list) actually have such a method.

And align: "nearest" is for pretending the behavior of nearest option of scrollIntoView for now. I think the way scrolling to a specific item is very depending on its usecase. Maybe we should add more cutomizable API if needed, such as calculateViewLocation of react-virtuoso.

[jackhodkinson]

Thanks, that makes sense. Added a PR to expose getItemSize #539

[inokawa]

Released in 0.36.3.