Merge pull request #476 from inokawa/bottom-jump

Improve jump compensation at end

e2e/VList.spec.ts

@@ -389,6 +389,42 @@ test.describe("check if scroll jump compensation works", () => {
     }
   });
 
+  test("resize at bottom", async ({ page, browserName }) => {
+    await page.goto(storyUrl("advanced-collapse--two-stage-render"));
+    const component = await getScrollable(page);
+    const container = await getVirtualizer(page);
+    await component.waitForElementState("stable");
+    await page.waitForTimeout(500);
+
+    // should reach to the bottom within the specified number of tries
+    for (let i = 0; i <= 1; i++) {
+      // scroll to bottom
+      await scrollToBottom(component);
+
+      const prevBottomItem = getLastItem(component);
+
+      // wait for resize completed
+      await page.waitForTimeout(500);
+      await container.waitForElementState("stable");
+
+      const bottomItem = getLastItem(component);
+
+      // check if distance from the bottom isn't changed by resizes
+      const prevBottom = (await prevBottomItem).bottom;
+      const bottom = (await bottomItem).bottom;
+      if (
+        browserName === "firefox"
+          ? Math.abs(bottom - prevBottom) <= 2
+          : bottom === prevBottom
+      ) {
+        // succeeded
+        return;
+      }
+    }
+
+    throw new Error(`couldn't reach the bottom`);
+  });
+
   test("resize with smooth scroll", async ({ page }) => {
     await page.goto(storyUrl("advanced-collapse--collapse-and-scroll"));
     const component = await getScrollable(page);

src/core/store.ts

@@ -256,7 +256,9 @@ export const createVirtualStore = (
       return [
         _flushedJump,
         // Use absolute position not to exceed scrollable bounds
-        _scrollMode === SCROLL_BY_SHIFT,
+        _scrollMode === SCROLL_BY_SHIFT ||
+          // https://github.com/inokawa/virtua/discussions/475
+          getRelativeScrollOffset() + viewportSize >= getTotalSize(),
       ];
     },
     _subscribe(target, cb) {

stories/react/advanced/Collapse.stories.tsx

@@ -232,3 +232,49 @@ const Collapser2 = ({ id, onHidden }: { id: number; onHidden: () => void }) => {
     </div>
   );
 };
+
+const TwoStageRenderItem = ({ index }: { index: number }) => {
+  const getRandomHeight = () => Math.floor(Math.random() * 100) + 50; // Random height between 50 and 150 px
+  const getRandomDelay = () => Math.floor(Math.random() * 300) + 100; // Random delay between 100 and 400 ms
+
+  const [immediateHeight] = useState(() => getRandomHeight());
+  const [delayedHeight, setDelayedHeight] = useState<number | null>(null);
+
+  useEffect(() => {
+    const delay = getRandomDelay();
+    const timer = setTimeout(() => {
+      setDelayedHeight(getRandomHeight());
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div style={{ border: "5px solid black", margin: "5px 0" }}>
+      <div style={{ height: immediateHeight, background: "#e0e0e0" }}>
+        Immediate Content {index} (Height: {immediateHeight}px)
+      </div>
+      {delayedHeight !== null ? (
+        <div style={{ height: delayedHeight, background: "#f0f0f0" }}>
+          Delayed Content {index} (Height: {delayedHeight}px)
+        </div>
+      ) : (
+        <div style={{ padding: "10px", background: "#ffe0e0" }}>Loading...</div>
+      )}
+    </div>
+  );
+};
+
+export const TwoStageRender: StoryObj = {
+  render: () => {
+    return (
+      <div style={{ height: "400px", border: "1px solid black" }}>
+        <VList style={{ height: "100%", width: "100%" }}>
+          {Array.from({ length: 100 }).map((_, index) => (
+            <TwoStageRenderItem key={index} index={index} />
+          ))}
+        </VList>
+      </div>
+    );
+  },
+};