How to scrollToIndex() and .then(() => {}) do something when the scroll animation ended?

[vasiline2256]

Hi, is there a way to do something after the scroll animation ended for scrollToIndex()?

like highlight the target index Row after the animation ended?

[piecyk]

Hi, there is isScrolling boolean on instance, maybe you can check it after scroll happens, or another option would be to check Intersection Observer if the row is visible in viewport.

[vasiline2256]

hi, I cannot find any example of isScrolling, do you mind sending me a link to an example?

[piecyk]

It's a property on instance,

const virtualizer = useWindowVirtualizer({
  count: 1000,
  estimateSize: () => 50,
})
console.log(virtualizer.isScrolling) // true when scrolling

[vasiline2256]

I see, thanks for the swift reply

but virtualizer.isScrolling will only detect when the window is scrolling or not right?

the part of I am unable to solve is how to trigger the code precisely after scroll happens

[piecyk]

but virtualizer.isScrolling will only detect when the window is scrolling or not right?

no, it's same on useVirtualizer

the part of I am unable to solve is how to trigger the code precisely after scroll happens

you can try something like this, when triggering scroll in event handler, mark the index as pending then after isScrolling is false you need to trigger animation. Maybe the intersection observer would be even easier, so mark index as pending, the when row is visible start animation

[vasiline2256]

do you mean something like this:

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import {
  elementScroll,
  useVirtualizer,
  VirtualizerOptions,
} from '@tanstack/react-virtual';

function easeInOutQuint(t) {
  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
}

function App() {
  const parentRef = React.useRef<HTMLDivElement>();
  const scrollingRef = React.useRef<number>();

  const scrollToFn: VirtualizerOptions<any, any>['scrollToFn'] =
    React.useCallback((offset, canSmooth, instance) => {
      const duration = 1000;
      const start = parentRef.current.scrollTop;
      const startTime = (scrollingRef.current = Date.now());

      const run = () => {
        if (scrollingRef.current !== startTime) return;
        const now = Date.now();
        const elapsed = now - startTime;
        const progress = easeInOutQuint(Math.min(elapsed / duration, 1));
        const interpolated = start + (offset - start) * progress;

        if (elapsed < duration) {
          elementScroll(interpolated, canSmooth, instance);
          requestAnimationFrame(run);
        } else {
          elementScroll(interpolated, canSmooth, instance);
        }
      };

      requestAnimationFrame(run);
    }, []);

  const [something, setSomething] = React.useState(false);

  React.useEffect(() => {
    if (something) {
      alert('scroll finished');
      if (!rowVirtualizer.isScrolling) {
        setSomething(false);
      }
    }
  }, [something]);

  const rowVirtualizer = useVirtualizer({
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
    overscan: 5,
    scrollToFn,
  });

  const randomIndex = Math.floor(Math.random() * 10000);

  return (
    <div>
      <p>
        This smooth scroll example uses the <code>`scrollToFn`</code> to
        implement a custom scrolling function for the methods like{' '}
        <code>`scrollToIndex`</code> and <code>`scrollToOffset`</code>
      </p>

      <br />
      <br />

      <div>
        <button
          onClick={() => {
            rowVirtualizer.scrollToIndex(randomIndex);
            setSomething(true);
          }}
        >
          Scroll To Random Index ({randomIndex})
        </button>
      </div>

      <br />
      <br />

      <div
        ref={parentRef}
        className="List"
        style={{
          height: `200px`,
          width: `400px`,
          overflow: 'auto',
        }}
      >
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
            <div
              key={virtualRow.index}
              className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}
            >
              Row {virtualRow.index}
            </div>
          ))}
        </div>
      </div>
      <br />
      <br />
      {process.env.NODE_ENV === 'development' ? (
        <p>
          <strong>Notice:</strong> You are currently running React in
          development mode. Rendering performance will be slightly degraded
          until this application is build for production.
        </p>
      ) : null}
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

?

this is from the example at: https://tanstack.com/virtual/latest/docs/framework/react/examples/smooth-scroll