Scroll Image Update Logic

January 24, 2025 · AI Conversations

User

document.addEventListener('DOMContentLoaded', function () {
const items = document.querySelectorAll('.post-scroll-item');
const images = document.querySelectorAll('.post-scroll-image img');
const contentContainer = document.querySelector('.post-scroll-content');

// Update image on scroll
contentContainer.addEventListener('scroll', function () {
const scrollTop = contentContainer.scrollTop;

items.forEach((item, index) => {
const itemTop = item.offsetTop – contentContainer.offsetTop;
const itemBottom = itemTop + item.offsetHeight;

if (
scrollTop >= itemTop – contentContainer.clientHeight / 2 &&
scrollTop < itemBottom
) {
images.forEach((img, imgIndex) => {
img.style.display = imgIndex === index ? 'block' : 'none';
});
}
});
});

// Initialize first image as active
if (images.length > 0) {
images[0].style.display = 'block';
}
});
apply above when this post-blog-scroll div found

Assistant

To apply this functionality only when the `post-blog-scroll` div is found on the page, you can wrap your JavaScript code with a condition to check for the existence of this div. Here's the updated code:

document.addEventListener('DOMContentLoaded', function () {
    const scrollContainer = document.querySelector('.post-blog-scroll');

    if (scrollContainer) {
        const items = scrollContainer.querySelectorAll('.post-scroll-item');
        const images = scrollContainer.querySelectorAll('.post-scroll-image img');
        const contentContainer = scrollContainer.querySelector('.post-scroll-content');

        // Update image on scroll
        contentContainer.addEventListener('scroll', function () {
            const scrollTop = contentContainer.scrollTop;

            items.forEach((item, index) => {
                const itemTop = item.offsetTop - contentContainer.offsetTop;
                const itemBottom = itemTop + item.offsetHeight;

                if (
                    scrollTop >= itemTop - contentContainer.clientHeight / 2 &&
                    scrollTop < itemBottom
                ) {
                    images.forEach((img, imgIndex) => {
                        img.style.display = imgIndex === index ? 'block' : 'none';
                    });
                }
            });
        });

        // Initialize first image as active
        if (images.length > 0) {
            images[0].style.display = 'block';
        }
    }
});

### Explanation:
1. **Check for `.post-blog-scroll`:** The script first checks whether the `.post-blog-scroll` container exists using `document.querySelector('.post-blog-scroll')`.
2. **Scoped Query:** Inside the condition, all element queries (`.post-scroll-item`, `.post-scroll-image img`, and `.post-scroll-content`) are scoped to the `.post-blog-scroll` container to ensure they apply only to the relevant section.
3. **Initialization:** If the container is found, the logic for scrolling and initializing the first image as active is applied. Otherwise, the script does nothing.

User

also browser scorll

Assistant

To handle both the browser scroll and the `contentContainer` scroll, you can add an event listener to the `window` object for the browser scroll. Below is the updated script:

document.addEventListener('DOMContentLoaded', function () {
    const scrollContainer = document.querySelector('.post-blog-scroll');

    if (scrollContainer) {
        const items = scrollContainer.querySelectorAll('.post-scroll-item');
        const images = scrollContainer.querySelectorAll('.post-scroll-image img');
        const contentContainer = scrollContainer.querySelector('.post-scroll-content');

        const updateImagesOnScroll = (scrollTop) => {
            items.forEach((item, index) => {
                const itemTop = item.offsetTop - (contentContainer ? contentContainer.offsetTop : 0);
                const itemBottom = itemTop + item.offsetHeight;

                if (
                    scrollTop >= itemTop - (contentContainer?.clientHeight || window.innerHeight) / 2 &&
                    scrollTop < itemBottom
                ) {
                    images.forEach((img, imgIndex) => {
                        img.style.display = imgIndex === index ? 'block' : 'none';
                    });
                }
            });
        };

        // Listen for scroll in content container
        if (contentContainer) {
            contentContainer.addEventListener('scroll', function () {
                updateImagesOnScroll(contentContainer.scrollTop);
            });
        }

        // Listen for browser scroll
        window.addEventListener('scroll', function () {
            const scrollTop = window.scrollY + window.innerHeight / 2; // Center of the viewport
            updateImagesOnScroll(scrollTop);
        });

        // Initialize first image as active
        if (images.length > 0) {
            images[0].style.display = 'block';
        }
    }
});

### Updates:
1. **Unified Scroll Logic:** The `updateImagesOnScroll` function is created to handle both `contentContainer` scroll and browser scroll events. It calculates the active item and updates the images accordingly.
2. **Browser Scroll:** The `window.addEventListener('scroll', …)` is added to listen to the browser's scrolling. It uses `window.scrollY` and `window.innerHeight` to calculate the scroll position and determine the active item.
3. **Content Container Scroll:** The scroll logic for the content container (`contentContainer.addEventListener`) remains the same, but now uses the shared `updateImagesOnScroll` function.

### Behavior:
– When scrolling inside `.post-scroll-content`, the images update as per the content container's scroll position.
– When scrolling the browser window, the images update as per the browser's scroll position relative to `.post-scroll-item`.

This ensures the functionality works seamlessly for both scrolling scenarios.

Scroll Image Update Logic

Leave a Comment Cancel