${body}
`; fragment.appendChild(card); }); feed.appendChild(fragment); } function onIntersection(entries) { if (entries[0].isIntersecting) { const newItems = generateItems(++page); renderItems(newItems); } } const observer = new IntersectionObserver(onIntersection, { root: null, rootMargin: '0px', threshold: 0.1 }); observer.observe(sentinel); ``` **Performance advantages** of this approach include: - **Reduced CPU usage**: Callbacks execute only when visibility changes, not on every scroll pixel - **Eliminated layout thrashing**: The browser calculates visibility natively without `getBoundingClientRect()` calls - **Cleaner code**: No manual scroll offset tracking or debounce logic required ## Combining Both Patterns for Dynamic Content To implement infinite scroll and animation on scroll events simultaneously, invoke the existing animation check immediately after rendering new content. This ensures newly loaded items animate into view without waiting for the next user scroll. After appending items in your IntersectionObserver callback, call `checkAndShowBoxes()` to evaluate the new elements against the viewport threshold: ```javascript function onIntersection(entries) { if (entries[0].isIntersecting) { const newItems = generateItems(++page); renderItems(newItems); // Trigger animation for newly added elements checkAndShowBoxes(); } } ``` Alternatively, allow the existing scroll listener to detect new elements naturally. Since `checkAndShowBoxes()` queries the DOM using `document.querySelectorAll('.box')` on every scroll event, it automatically includes dynamically appended elements. ### Critical Implementation Details When building the combined solution: 1. **Structure**: Use a container for feed items, followed immediately by the sentinel element with minimal height (e.g., `height: 1px`) 2. **CSS**: Define initial states with `transform: translateY(50px)` and `opacity: 0`, transitioning to `transform: translateY(0)` and `opacity: 1` when the `.show` class is applied 3. **Timing**: Ensure the IntersectionObserver threshold (e.g., `0.1`) provides adequate buffer to load content before the user reaches the absolute bottom ## Summary - **Scroll animations** in [`projects/animation-on-scroll/script.js`](https://github.com/jisan-mia/dom-projects/blob/main/projects/animation-on-scroll/script.js) use `getBoundingClientRect().top` compared against `window.innerHeight / 5 * 4` to toggle CSS classes when elements enter the viewport. - **Infinite scroll** relies on IntersectionObserver watching a sentinel element to load content efficiently, avoiding the performance cost of continuous scroll event listeners. - **Integration** requires invoking the animation check function after rendering new batches to ensure immediate visual feedback for dynamically loaded content. - The jisan-mia/dom-projects repository validates these patterns through working implementations in `projects/animation-on-scroll/` and references in [`projects/question-list-progress/data.js`](https://github.com/jisan-mia/dom-projects/blob/main/projects/question-list-progress/data.js). ## Frequently Asked Questions ### How do I prevent scroll animation jank on low-performance devices? Use **CSS transform** and **opacity** exclusively for animations, as these properties leverage the compositor thread without forcing layout recalculations. Avoid animating **width**, **height**, **margin**, or **top** properties, which trigger expensive reflows. Add `{ passive: true }` to scroll listeners to prevent blocking the main thread: `window.addEventListener('scroll', checkAndShowBoxes, { passive: true })`. ### Can I use these patterns with React or Vue components? Yes. Initialize the IntersectionObserver inside a `useEffect` (React) or `mounted` (Vue) hook, storing references to the feed and sentinel elements. Disconnect the observer in the cleanup function to prevent memory leaks. For scroll animations, query the DOM after each render cycle or use a ref callback to track dynamically loaded elements. ### Why does my infinite scroll trigger multiple times rapidly? This occurs when the sentinel remains visible after loading new content. Implement a **loading lock** using a boolean flag (e.g., `let isLoading = false`) that prevents concurrent fetch operations. Set the flag to `true` when loading starts and `false` after appending content. Alternatively, temporarily **unobserve** the sentinel before fetching and **re-observe** after the DOM updates. ### What is the performance difference between scroll events and IntersectionObserver? Scroll events fire at the browser's refresh rate (60–120 times per second), executing JavaScript on every frame regardless of element position changes. IntersectionObserver uses the browser's native visibility engine, firing callbacks only when elements cross specified thresholds. For infinite scroll implementations, IntersectionObserver reduces CPU usage by approximately 90% compared to scroll event listeners with `getBoundingClientRect()` position checks.