Skip to main content

Scroll Handling

Loading and rendering complex content while scrolling affects the scrolling performance.

To let the integrator address that issue, the Virtuoso component exposes a isScrolling event property which gets called when the user starts/stops scrolling. The callback receives true when the user starts scrolling and false shortly after the last scroll event.

Handling this event can improve performance by hiding/replacing certain heavy elements in the items.

import { Virtuoso } from 'react-virtuoso'
import { generateUsers, avatar, avatarPlaceholder } from './data'
import { useState, useMemo } from 'react'

export default function App() {
  const [isScrolling, setIsScrolling] = useState(false);
  const users = useMemo(() => generateUsers(100), [])
  return (
      style={{ height: 400 }}
      itemContent={(index, user) => {
        return (
              backgroundColor: user.bgColor,
              padding: '1rem 0'
            <div style={{ float: 'left', margin: '1rem' }}>
              {isScrolling ? avatarPlaceholder() : avatar() }

            <div style={{ marginTop: '1rem' }}>