Cannot scroll up in vue dynamic example

[ghost]

Describe the bug

Cannot scroll up in vue dynamic example

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/github/tanstack/virtual/tree/beta/examples/vue/dynamic?embed=1

Steps to reproduce

1. Scroll down
2. Try to scroll up

Expected behavior

I expect that it will scroll up without lag

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/TanStack/virtual/assets/80841256/093069c2-b270-4bf9-ad78-af488cdd666d

Platform

OS - MacOS Sonoma, Windows, Linux Browser - Chrome Version 118.0.5993.117 (Official Build) (arm64). This issue works only in chromium browsers

tanstack-virtual version

See in codesandbox (ノ>_<)ノ

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[ssp7]

Any update on this?

[KevinVandy]

Any update on this?

Are you using Vue or React?

[ssp7]

Any update on this?

Are you using Vue or React?

React

[nconfrey]

I fixed a similar problem by modifying the Virtualizer to not remeasure elements when scrolling up:

measureElement: (element, entry, instance) => {
      const direction = instance.scrollDirection
      if (direction === "forward" || direction === null) {
        return element.scrollHeight
      } else {
        // don't remeasure if we are scrolling up
        const indexKey = Number(element.getAttribute("data-index"))
        let cacheMeasurement = instance.itemSizeCache.get(indexKey)
        return cacheMeasurement
      }
    }

[BazanAlexandro]

Was able to fix this by delaying measurements with nextTick before measureElement. Looks like vue renders items a bit later, breaking dynamic measurements.

So, my measure function looks like this

  const measureElement = (el: any) => {
    nextTick(() => {
      if (!el) return;
      rowVirtualizer.value.measureElement(el);
    });
  };

[AlejandroAkbal]

Thanks @BazanAlexandro, your solution works perfectly!

[mvznfcoqe]

Was able to fix this by delaying measurements with nextTick before measureElement. Looks like vue renders items a bit later, breaking dynamic measurements.

So, my measure function looks like this

  const measureElement = (el: any) => {
    nextTick(() => {
      if (!el) return;
      rowVirtualizer.value.measureElement(el);
    });
  };

It doesn't seem to completely solve the problem on IOS Safari :( Still waiting for official fix..

[piecyk]

@mvznfcoqe i think the issue here is with overflow-anchor try to add overflow-anchor: none; on scrolling element

<div
  ref="parentRef"
  style="height: 400px; width: 400px; overflow-y: auto; overflow-anchor: none;"
>