fix: fix scroll offset when scrollSize is samller than containerSize

naver · Feb 6, 2025 · f3d0fc2 · f3d0fc2
1 parent 899753e
commit f3d0fc2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/packages/infinitegrid/src/InfiniteGrid.ts b/packages/infinitegrid/src/InfiniteGrid.ts
@@ -916,6 +916,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
     const infinite = this.infinite;
     const scrollManager = this.scrollManager;
     const scrollPos = scrollManager.getRelativeScrollPos()!;
+    const orgScrollPos = scrollManager.getScrollPos()!;
     const prevScrollSize = infinite.getScrollSize();
     const prevContainerSize = infinite.getSize();
     const prevVisibleArea = infinite.getVisibleArea(scrollPos, direction);
@@ -957,16 +958,23 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
         let offset = nextPos - prevPos;
 
         // If reversed, scroll size (case where container size is reduced)
+        const nextScrollSize = infinite.getScrollSize();
+        const nextContainerSize = infinite.getSize();
+
         if (offset < 0) {
-          const nextScrollSize = infinite.getScrollSize();
-          const nextContainerSize = infinite.getSize();
           const endOffset = Math.max(scrollPos - Math.max(0, prevScrollSize - prevContainerSize), 0);
           const nextScollPos
             = Math.min(scrollPos, Math.max(0, nextScrollSize - nextContainerSize))
             + endOffset;
 
           // The scroll size is restored to the extent that it has been reduced.
           offset += scrollPos - nextScollPos;
+        } else if (offset > 0) {
+          // If it is smaller than the scroll size when in the forward direction, the offset is 0.
+          const maxScrollPos = Math.max(0, nextScrollSize - nextContainerSize);
+          const nextScrollPos = orgScrollPos + offset;
+
+          offset = Math.max(0, Math.min(maxScrollPos, nextScrollPos) - orgScrollPos);
         }
 
         this.scrollManager.scrollBy(offset);

diff --git a/packages/infinitegrid/test/unit/Infinite.spec.ts b/packages/infinitegrid/test/unit/Infinite.spec.ts
@@ -2,7 +2,7 @@ import { Infinite } from "../../src/Infinite";
 import { cleanup } from "./utils/utils";
 import * as sinon from "sinon";
 
-describe.only("test Infinite", () => {
+describe("test Infinite", () => {
   let infinite: Infinite | null;
 
   afterEach(() => {

diff --git a/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts b/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts
@@ -509,6 +509,48 @@ describe("test InfiniteGrid", () => {
 
         expect(elements.map((el) => el.innerHTML)).to.be.deep.equals(["0", "1", "2", "3", "4", "5", "6", "7", "8"]);
       });
+      it("should check if the offset is entered correctly when prepend", async () => {
+        // Given
+        // sufficient height so that scroll size does not occur
+        const igScrollContainer = ig!.getScrollContainerElement();
+
+        igScrollContainer.style.height = "1000px";
+        ig!.isReachEnd = true;
+        ig!.syncItems([3, 4, 5].map((child) => {
+          return {
+            groupKey: Math.floor(child / 3),
+            key: child,
+            html: `<div style="height: 150px;">${child}</div>`,
+          };
+        }));
+        ig!.renderItems({
+          useResize: true,
+        });
+
+        await waitEvent(ig!, "renderComplete");
+
+        const spy = sinon.spy();
+
+
+        // When
+        ig!.syncItems([0, 1, 2, 3, 4, 5].map((child) => {
+          return {
+            groupKey: Math.floor(child / 3),
+            key: child,
+            html: `<div style="height: 150px;">${child}</div>`,
+          };
+        }));
+        ig!.renderItems();
+
+        // the requestPrepend event is fired because scrollPos is 0.
+        ig!.once("requestPrepend", spy);
+        await waitEvent(ig!, "renderComplete");
+
+        // Then
+        expect(ig!.getStartCursor()).to.be.equals(0);
+        expect(ig!.getEndCursor()).to.be.equals(1);
+        expect(spy.called).to.be.true;
+      });
     });
     describe("test contentError event", () => {
       it("should check if contentError event occurs with error image", async () => {