diff --git a/cypress/e2e/example-infinite-scroll-esm.cy.ts b/cypress/e2e/example-infinite-scroll-esm.cy.ts index 22afa930..954a2e97 100644 --- 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 index 4ec52b08..82a56061 100644 --- a/examples/example-infinite-scroll-esm.html +++ b/examples/example-infinite-scroll-esm.html @@ -178,21 +178,22 @@

Data Count

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(); } });