ScrollToIndex is not working with RTL.

[meetmshah88]

Describe the bug

For at least make horizontal scroll visible for RTL ,i have to do below changes :

• isRtl: true in virtualizer
• dir="rtl" on scrollable container
• pass the negative value to transform: translateX(-${virtualColumn.start}px) here.

Can anyone help here like its very simple example still the scrollToIndex does not work in RTL?

function ColumnVirtualizerFixed() {
  const parentRef = React.useRef(null);

  const columnVirtualizer = useVirtualizer({
    isRtl: true,
    horizontal: true,
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    overscan: 20, // Increased for smoother experience
    gap: 20,
  });

  // Optional: force measure on mount for more reliable scroll
  React.useLayoutEffect(() => {
    columnVirtualizer.measure();
  }, [columnVirtualizer]);

  return (
    <>
      <div style={{ width: `400px`, height: `100px` }}>
        <div
          dir="rtl"
          ref={parentRef}
          className="List"
          style={{
            width: '100%',
            height: '100%',
            overflowX: 'scroll',
            overflowY: 'hidden',
            scrollbarWidth: 'none',
          }}
        >
          <ul
            style={{
              width: `${columnVirtualizer.getTotalSize()}px`,
              height: '100%',
              position: 'relative',
              listStyle: 'none',
              margin: 0,
              padding: 0,
              right: 0, // Anchor to right for RTL
            }}
          >
            {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
              <li
                key={virtualColumn.index}
                className={
                  virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
                }
                style={{
                  position: 'absolute',
                  height: '100%',
                  width: `${virtualColumn.size}px`,
                  transform: `translateX(-${virtualColumn.start}px)`, // Negative for RTL
                  border: '1px solid black',
                  padding: 0,
                }}
              >
                Column {virtualColumn.index}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <button
        onClick={() => {
          // Force measure before scroll for reliability
          columnVirtualizer.measure();
          setTimeout(() => {
            columnVirtualizer.scrollToIndex(6, {
              behavior: 'smooth',
              align: 'center',
            });
          }, 0);
        }}
      >
        scroll
      </button>
    </>
  );
}

Your minimal, reproducible example

https://stackblitz.com/edit/react-rkwupx8l?file=src%2FApp.js

Steps to reproduce

Click on the button and you will see that nothing is getting scrolled and we could not able to reach that card index.

Expected behavior

Expected behavior should be scroll should happen in RTL to the given index.

How often does this bug happen?

None

Screenshots or Videos

Platform

Everywhere.

tanstack-virtual version

3.13.12

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.