Scroll Content Image Update

if (scrollContainer) {
const items = scrollContainer.querySelectorAll('.post-scroll-item');
const contentContainer = scrollContainer.querySelector('.post-scroll-content');
const imageContainer = document.querySelector('.post-scroll-image');
let activeIndex = -1; // Track the last active item

contentContainer.addEventListener('scroll', function () {
let closestItemIndex = -1;
let closestDistance = Infinity;

items.forEach((item, index) => {
const itemTop = item.offsetTop – contentContainer.offsetTop;
const distance = Math.abs(contentContainer.scrollTop – itemTop);

if (distance < closestDistance) {
closestDistance = distance;
closestItemIndex = index;
}
});

if (closestItemIndex !== -1 && closestItemIndex !== activeIndex) {
activeIndex = closestItemIndex;

// Reset all items and update the active one
items.forEach(item => item.style.opacity = '0');
items[activeIndex].style.opacity = '1';

// Change image
const imgSrc = items[activeIndex].getAttribute('data-img');
if (imgSrc && imageContainer) {
imageContainer.innerHTML = “;
}
}
});
}
});

onevery scroll change cotnent

### Issues & Improvements:
1. **Opacity Reset Issue**
– Right now, all items' opacity is set to `0` except the active one. This might create an undesired flicker effect. Consider using `opacity: 0.5` for non-active items instead of hiding them completely.

2. **Better Performance**
– Instead of setting opacity for all elements on every scroll, only update the new active item and reset the previous one.

3. **Image Flickering**
– If the same image is being updated repeatedly, this can cause unnecessary re-rendering. We should update the image **only if it changes**.

### Improved Code:

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

    if (scrollContainer) {
        const items = scrollContainer.querySelectorAll('.post-scroll-item');
        const contentContainer = scrollContainer.querySelector('.post-scroll-content');
        const imageContainer = document.querySelector('.post-scroll-image');
        let activeIndex = -1; // Track the last active item
        let lastImageSrc = ''; // Track last image to avoid unnecessary updates

        contentContainer.addEventListener('scroll', function () {
            let closestItemIndex = -1;
            let closestDistance = Infinity;

            items.forEach((item, index) => {
                const itemTop = item.offsetTop - contentContainer.offsetTop;
                const distance = Math.abs(contentContainer.scrollTop - itemTop);

                if (distance < closestDistance) {
                    closestDistance = distance;
                    closestItemIndex = index;
                }
            });

            if (closestItemIndex !== -1 && closestItemIndex !== activeIndex) {
                // Reset previous active item
                if (activeIndex !== -1) {
                    items[activeIndex].style.opacity = '0.5';
                }

                // Update new active item
                activeIndex = closestItemIndex;
                items[activeIndex].style.opacity = '1';

                // Change image only if needed
                const imgSrc = items[activeIndex].getAttribute('data-img');
                if (imgSrc && imageContainer && imgSrc !== lastImageSrc) {
                    imageContainer.innerHTML = `<img src="${imgSrc}" alt="Scroll Image" />`;
                    lastImageSrc = imgSrc;
                }
            }
        });
    }
});

### Summary of Fixes:
– **Prevent unnecessary updates**: The script now only changes the opacity and image **when necessary**.
– **Better performance**: Instead of looping through all items and resetting their opacity each time, we now only modify the previous and new active elements.
– **Fix image flickering**: The image only updates **if it changes**, reducing unnecessary DOM manipulations.

Would you like me to adjust it further based on your specific layout or effects? 🚀