Scroll item to center doesn't work

[pimterry]

The current scroll to center isn't working correctly (v1.8.5). A worked example:

I have a vertical list of fixed height items. There's 908px visible, and they're 32px each (so 28 and a bit rows visible at any time). If I run scrollToItem(24, "center"), and I have a sufficiently long list, it should scroll to 330px. Instead it scrolls to 0px. This is annoying if you're at 0px and want it centered, and looks completely broken if it's currently centered, and 'centering' the row actually moves it most of the way down the window.

It should be 330px because:

• The row offset is 768px (row index * row height = 24*32 = 768px). This is the offset to put the row at the top of the window.
• We want an offset that is half a window above this, to center the row, plus half the height of the row down, to center the center of the row.
• Therefore, the centered offset should be 330px (row offset - window size/2 + row size/2 = 768 - 908/2 + 32/2 = 330px

I think that is the correct logic, and in this case it puts the row exactly in the center of the screen. From there you just need to bound it to not offset < 0 or past the end of the list.

Instead, right now the logic returns 0 for any rows near the start (as here) or the last possible offset for all items near the end, even though it's completely possible to center these correctly.

That logic also calculates a middle offset which it uses in other cases. It's wrong in cases like this though (384px here) because it's based on the min/max offsets which have already been clamped to match the list size by this stage, so don't accurately give you the center position.

#274 did fix a previous bug caused by this clamping, but by disabling centering in all cases where clamping takes effect. It would be better to use the logic above instead, and do centering correctly in all cases.

Would you be open to a PR to fix this?

[anastasiya1155]

I modified the original function getOffsetForIndexAndAlignment and pass its output directly to the function scrollTo instead of 'scrollToItem'. Here is what I use

const getOffsetForIndexAndAlignment = (
  { height, itemCount, itemSize }: ReactWindowProps,
  index: number,
  align: Align,
  scrollOffset: number,
): number => {
  const size = height;
  const rowsOnPage = size / itemSize;
  const lastItemOffset = Math.max(0, itemCount * itemSize - size);
  const maxOffset = Math.min(lastItemOffset, index * itemSize);
  const minOffset = Math.max(0, index * itemSize - size + itemSize);

  if (index < rowsOnPage / 2) {
    // if in the first half of the first 'page', don't scroll
    return 0;
  }
  if (index < rowsOnPage || index > itemCount - rowsOnPage) {
    // if on the first or last page, minOffset/maxOffset will be incorrect, scroll to center the item
    return index * itemSize - size / 2;
  }
  if (index > itemCount - rowsOnPage / 2) {
    // if in the last half of the last page, scroll to the bottom
    return lastItemOffset;
  }

  if (align === 'smart') {
    if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
      align = 'auto';
    } else {
      align = 'center';
    }
  }

  switch (align) {
    case 'start':
      return maxOffset;
    case 'end':
      return minOffset;
    case 'center': {
      const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
      return middleOffset;
    }
    case 'auto':
    default:
      if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
        return scrollOffset;
      } else if (scrollOffset < minOffset) {
        return minOffset;
      } else {
        return maxOffset;
      }
  }
};

// instead of scrollToItem
const scrollOffset = getOffsetForIndexAndAlignment(
  listProps,
  scrollToItem,
  align,
  outerRef.scrollTop,
);
ref.current.scrollTo(scrollOffset);

Note that this function only works for vertical containers
Hope this helps somebody.