${ex.description}
`; container.appendChild(card); }); } // Load the next page and render it function loadNextPage() { if (offset >= allExercises.length) return; // No more items const nextSlice = allExercises.slice(offset, offset + PAGE_SIZE); renderExercises(nextSlice); offset += PAGE_SIZE; } // Initial fetch of the whole data file (only once) fetch(EXERCISES_URL) .then(res => res.json()) .then(data => { allExercises = data; loadNextPage(); // Render the first page observeSentinel(); // Start listening for scroll events }) .catch(err => console.error('Failed to load exercises:', err)); // Set up IntersectionObserver on the sentinel element function observeSentinel() { const sentinel = document.getElementById('sentinel'); const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { loadNextPage(); } }); observer.observe(sentinel); } ``` The **sentinel** stays at the bottom of the document. When it enters the viewport, `entries[0].isIntersecting` becomes true and `loadNextPage()` appends the next batch of exercises. Because the data is cached in `allExercises` after the first fetch, subsequent calls are instantaneous. ## Handling the End of the Dataset When the `offset` cursor reaches `allExercises.length`, the `loadNextPage()` function returns early and stops requesting new slices. This prevents unnecessary renders and gracefully handles the end of the static catalog. If the repository ever gains a real back-end, replace the in-memory `slice()` logic with paginated API requests such as `/exercises?offset=…&limit=…`. ## Optional Enhancements - **Add a loading spinner** that displays while the next page is being prepared. - **Persist `offset` in `localStorage`** so users resume their scroll position after a page refresh. - **Debounce the observer callback** if the page size is large, preventing rapid consecutive renders when the sentinel flickers. ## Summary - Implementing infinite scroll in the exercise browser requires adding a sentinel element to [`index.html`](https://github.com/hasaneyldrm/exercises-dataset/blob/main/index.html), caching [`data/exercises.json`](https://github.com/hasaneyldrm/exercises-dataset/blob/main/data/exercises.json) client-side, and slicing the array in [`scripts/infiniteScroll.js`](https://github.com/hasaneyldrm/exercises-dataset/blob/main/scripts/infiniteScroll.js). - The **Intersection Observer API** triggers `loadNextPage()` when the sentinel enters the viewport, which is more performant than traditional `scroll` event listeners. - The `renderExercises()` function appends new cards to `#exercise-list` without re-rendering existing items, minimizing DOM thrashing. - Once `offset` exceeds `allExercises.length`, pagination stops automatically, providing a clean end-of-data experience. ## Frequently Asked Questions ### How do I stop infinite scroll when all exercises are loaded? The `loadNextPage()` function checks `if (offset >= allExercises.length) return;` before slicing the array. When the offset exceeds the total number of exercises, the function exits silently and no additional cards are appended. ### Why is Intersection Observer better than a scroll event listener? The **Intersection Observer API** delegates visibility detection to the browser, eliminating the need to poll `window.scrollY` on every frame. It is more performant and works correctly even when the scrollable container is an element other than the window. ### Can infinite scroll work without loading the entire JSON file first? In the current `hasaneyldrm/exercises-dataset` architecture, the simplest approach is to fetch [`data/exercises.json`](https://github.com/hasaneyldrm/exercises-dataset/blob/main/data/exercises.json) once and slice it on the client. If a back-end is introduced later, replace the single fetch with paginated API requests using query parameters like `?offset=${offset}&limit=20`. ### What is the role of the sentinel element? The sentinel is an empty `` placed after the last rendered card in [`index.html`](https://github.com/hasaneyldrm/exercises-dataset/blob/main/index.html). The `IntersectionObserver` watches this element, and when it scrolls into view, it triggers the next page load.