Add viewportSize to handle

src/react/List.tsx

@@ -205,6 +205,10 @@ export interface ListHandle {
    * Get current scrollHeight or scrollWidth.
    */
   readonly scrollSize: number;
+  /**
+   * Get current offsetHeight or offsetWidth.
+   */
+  readonly viewportSize: number;
   /**
    * Scroll to the item specified by index.
    * @param index index of item
@@ -388,6 +392,9 @@ export const List = forwardRef<ListHandle, ListProps>(
           get scrollSize() {
             return scroller._getActualScrollSize();
           },
+          get viewportSize() {
+            return store._getViewportSize();
+          },
           scrollToIndex(index) {
             scroller._scrollToIndex(index, count);
           },

stories/advanced/InfiniteScrolling.stories.tsx

@@ -130,7 +130,7 @@ export const InfiniteScrolling: StoryObj = {
           }}
         >
           {items.map((d) => (
-            <Row id={d.id} name={d.name} text={d.text} />
+            <Row key={d.id} id={d.id} name={d.name} text={d.text} />
           ))}
           {/* Now hide spinner without unmounting because onRangeChange is called twice due to item length change */}
           <Spinner hidden={!fetching} />

stories/advanced/Loop.stories.tsx

@@ -0,0 +1,73 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React, { useLayoutEffect, useMemo, useRef } from "react";
+import { List, ListHandle } from "../../src";
+
+export default {
+  component: List,
+} as Meta;
+
+const Row = ({ i }: { i: number }) => {
+  return (
+    <div
+      style={{
+        background: i % 2 === 0 ? "darkgray" : "white",
+        color: i % 2 === 0 ? "white" : "darkgray",
+        borderBottom: "solid 1px #ccc",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 10,
+        height: 200,
+        fontSize: 64,
+        fontWeight: "bold",
+      }}
+    >
+      {i}
+    </div>
+  );
+};
+
+export const Loop: StoryObj = {
+  render: () => {
+    const ref = useRef<ListHandle>(null);
+
+    const ITEM_LENGTH = 10;
+    const items = useMemo(() => Array.from({ length: ITEM_LENGTH }), []);
+
+    useLayoutEffect(() => {
+      ref.current?.scrollToIndex(ITEM_LENGTH);
+    }, []);
+
+    return (
+      <div
+        style={{ height: "100vh", display: "flex", flexDirection: "column" }}
+      >
+        <List
+          ref={ref}
+          style={{ flex: 1 }}
+          itemSize={200}
+          onScroll={(offset) => {
+            if (!ref.current) return;
+
+            const MARGIN = 100;
+            if (offset < 0 + MARGIN) {
+              ref.current.scrollTo(ref.current.scrollSize / 2 + offset);
+            } else if (
+              offset >
+              ref.current.scrollSize - ref.current.viewportSize - MARGIN
+            ) {
+              ref.current.scrollTo(offset - ref.current.scrollSize / 2);
+            }
+          }}
+        >
+          {items.map((d, i) => (
+            <Row key={i} i={i} />
+          ))}
+          {items.map((d, i) => (
+            <Row key={i + "-2"} i={i} />
+          ))}
+        </List>
+      </div>
+    );
+  },
+};