Scroll Item Update Logic
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 = “;
lastImageSrc = imgSrc;
}
}
});
}
});
change element on each single scroll
### Updated 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 = 0; // Start from the first item
let lastScrollTop = 0; // Track last scroll position
let lastImageSrc = ''; // Avoid unnecessary updates
function updateActiveItem(index) {
items.forEach((item, i) => {
item.style.opacity = i === index ? '1' : '0.5';
});
const imgSrc = items[index].getAttribute('data-img');
if (imgSrc && imageContainer && imgSrc !== lastImageSrc) {
imageContainer.innerHTML = `<img src="${imgSrc}" alt="Scroll Image" />`;
lastImageSrc = imgSrc;
}
}
contentContainer.addEventListener('scroll', function () {
let currentScrollTop = contentContainer.scrollTop;
let scrollDirection = currentScrollTop > lastScrollTop ? 'down' : 'up';
lastScrollTop = currentScrollTop;
if (scrollDirection === 'down' && activeIndex < items.length - 1) {
activeIndex++;
} else if (scrollDirection === 'up' && activeIndex > 0) {
activeIndex--;
}
updateActiveItem(activeIndex);
});
// Initialize the first active item
updateActiveItem(activeIndex);
}
});### Key Changes:
1. **Sequential Scrolling:** Instead of detecting the closest item, the script checks the scroll direction and moves to the next (`down`) or previous (`up`) item.
2. **Smooth Transitions:** The opacity changes smoothly between items.
3. **Prevents Unnecessary Updates:** Ensures that images only update when needed.
This will ensure that each single scroll step updates the next or previous item, making it feel more responsive and structured. Let me know if you need any tweaks! 🚀
### **Fixed Code (Scrolls to Next Item on Each Scroll)**
document.addEventListener('DOMContentLoaded', function () {
const scrollContainer = document.querySelector('.post-blog-scroll');
if (scrollContainer) {
const items = Array.from(scrollContainer.querySelectorAll('.post-scroll-item'));
const contentContainer = scrollContainer.querySelector('.post-scroll-content');
const imageContainer = document.querySelector('.post-scroll-image');
let activeIndex = 0; // Start at the first item
let isScrolling = false; // Prevent multiple triggers during fast scrolling
function updateActiveItem(index) {
items.forEach((item, i) => {
item.style.opacity = i === index ? '1' : '0.5';
});
const imgSrc = items[index].getAttribute('data-img');
if (imgSrc && imageContainer) {
imageContainer.innerHTML = `<img src="${imgSrc}" alt="Scroll Image" />`;
}
}
function scrollToItem(index) {
if (index < 0 || index >= items.length) return;
isScrolling = true;
items[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
setTimeout(() => {
activeIndex = index;
updateActiveItem(activeIndex);
isScrolling = false;
}, 500); // Delay to allow smooth scrolling
}
contentContainer.addEventListener('wheel', function (event) {
if (isScrolling) return; // Prevent multiple triggers
if (event.deltaY > 0 && activeIndex < items.length - 1) {
scrollToItem(activeIndex + 1); // Scroll down
} else if (event.deltaY < 0 && activeIndex > 0) {
scrollToItem(activeIndex - 1); // Scroll up
}
});
// Initialize the first active item
updateActiveItem(activeIndex);
}
});### **How It Works:**
1. **Captures the scroll direction (`wheel` event)**
– `event.deltaY > 0` → Scroll Down
– `event.deltaY < 0` → Scroll Up
2. **Moves to the next or previous item only when a single scroll happens**
3. **Uses `scrollIntoView({ behavior: 'smooth' })` for a natural scrolling effect**
4. **Prevents multiple rapid triggers using a flag (`isScrolling`)**
### **Expected Behavior:**
– On each mouse wheel movement, it moves to the next or previous `.post-scroll-item`.
– Only one item is scrolled at a time.
– Opacity and image update accordingly.
This should now work smoothly! Let me know if you need any modifications. 🚀🔥