chore: cleanup example code

6pac · Jul 27, 2024 · 7c050e6 · 7c050e6
1 parent 24c7f85
commit 7c050e6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/cypress/e2e/example-infinite-scroll-esm.cy.ts b/cypress/e2e/example-infinite-scroll-esm.cy.ts
@@ -79,9 +79,9 @@ describe('Example - Infinite Scroll', () => {
     cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left')
       .scrollTo('top');
 
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 0');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 9');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 8');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 7');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 6');
   });
 });
diff --git a/examples/example-infinite-scroll-esm.html b/examples/example-infinite-scroll-esm.html
@@ -178,21 +178,22 @@ <h4>Data Count</h4>
         const newData = loadData(0, FETCH_SIZE);
         grid.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered
         dataView.setItems(newData);
+        dataView.reSort();
       }
     });
 
-    // add Infinite Scroll when
+    // add onScroll listener to append items to the dataset whenever reaching the scroll bottom (scroll end)
     grid.onScroll.subscribe((e, args) => {
       const viewportElm = args.grid.getViewportNode();
-      if (['mousewheel', 'scroll'].includes(args.triggeredBy || '')
+      if (
+        ['mousewheel', 'scroll'].includes(args.triggeredBy || '')
+        && !scrollEndCalled
         && viewportElm.scrollTop > 0
         && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight
       ) {
-        if (!scrollEndCalled) {
-          const vpLeft = document.querySelector('.slick-viewport-top.slick-viewport-left');
-          scrollEndCalled = true;
-          handleOnScrollEnd();
-        }
+        const vpLeft = document.querySelector('.slick-viewport-top.slick-viewport-left');
+        scrollEndCalled = true;
+        handleOnScrollEnd();
       }
     });