flat-fuchsia

IS the scroll being controlled?

When using the library, the scrolling is not smooth and does not seem native anymore. Is the scroll controlled by the lib ?

5 Replies

fair-rose•13mo ago

This is due to element’s height being dynamic. There is no way to calculate the total height for the virtualizer upfront. I use it to display a grid list of icons and I truncate their names so all elements are equal in height and therefore the total height is calculated upfront and scroll works normally.

statutory-emerald•10mo ago

My height is estimated, and could be calculated up front, but scrolling using virtualizer.scrollToOffset is slow compared to native scroll

optimistic-gold•10mo ago

@Ilya Radchenko are you setting ref={virtualizer.measureElement} ?

statutory-emerald•10mo ago

const virtualizer = useVirtualizer({
    enabled: isEnabled,
    count: rows.length,
    getScrollElement: () => ganttElements.listRows,
    estimateSize: useCallback(
      // rows[index] can be undefined when creating a new item
      (index) => getScaledRowHeight(rows[index]?.type ?? 'task', prefs.fontSize),
      [prefs.fontSize, rows]
    ),
    getItemKey: useCallback(
      (index) => {
        const row = rows[index];
        return `${row.type}-${row.targetId}-${row.rootGroupId}`;
      },
      [rows]
    ),
    rangeExtractor,
    overscan: 25,
  });

const virtualizer = useVirtualizer({
    enabled: isEnabled,
    count: rows.length,
    getScrollElement: () => ganttElements.listRows,
    estimateSize: useCallback(
      // rows[index] can be undefined when creating a new item
      (index) => getScaledRowHeight(rows[index]?.type ?? 'task', prefs.fontSize),
      [prefs.fontSize, rows]
    ),
    getItemKey: useCallback(
      (index) => {
        const row = rows[index];
        return `${row.type}-${row.targetId}-${row.rootGroupId}`;
      },
      [rows]
    ),
    rangeExtractor,
    overscan: 25,
  });

Usiong estimateSize instead @piecyk

optimistic-gold•10mo ago

hmm then scrollToOffset should be pretty fast, can you debug with dev tools why it's slow? Or create small example then i can check it out.

Gaming

Programming

IS the scroll being controlled?

Did you find this page helpful?