Scroll Item Interaction Update
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 = jQuery('.post-scroll-image');
// Update item opacity and 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
) {
// Set active opacity
jQuery(items).css('opacity', '0'); // Reset all items to 0.5 opacity
jQuery(item).css('opacity', '1'); // Set active item to 1
// Change image
const imgSrc = jQuery(item).data('img');
if (imgSrc) {
imageContainer.html(“);
}
}
});
});
}
});
move and display post-scroll-item on single click scroll
1. **Handles click-based scrolling** – Moves to the next/previous item on click.
2. **Updates active item opacity** – Highlights the current item.
3. **Changes the image dynamically** – Updates the `.post-scroll-image` based on the active `.post-scroll-item`.
—
### **Updated JavaScript**
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 = jQuery('.post-scroll-image');
let currentIndex = 0; // Track the current item index
// Function to update active state and image
function updateActiveItem(index) {
if (index < 0 || index >= items.length) return; // Prevent out-of-bound errors
currentIndex = index;
const activeItem = items[currentIndex];
// Scroll to the selected item
contentContainer.scrollTo({
top: activeItem.offsetTop - contentContainer.offsetTop,
behavior: 'smooth'
});
// Update opacity
jQuery(items).css('opacity', '0'); // Reset all items
jQuery(activeItem).css('opacity', '1'); // Highlight active item
// Update image
const imgSrc = jQuery(activeItem).data('img');
if (imgSrc) {
imageContainer.html(`<img src="${imgSrc}" alt="Scroll Image" />`);
}
}
// Click event to move to the next item
contentContainer.addEventListener('click', function () {
if (currentIndex < items.length - 1) {
updateActiveItem(currentIndex + 1);
}
});
// Optional: Scroll event to auto-update opacity when scrolling manually
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
) {
updateActiveItem(index);
}
});
});
// Initialize first item as active
updateActiveItem(0);
}
});—
### **How It Works:**
✅ **Click to Scroll:** Clicking anywhere inside `.post-scroll-content` moves to the next `.post-scroll-item`.
✅ **Smooth Scrolling:** Ensures that the scroll transition is smooth and user-friendly.
✅ **Auto-Updates on Scroll:** If the user scrolls manually, it still updates opacity and image dynamically.
✅ **Prevents Out-of-Bound Errors:** Ensures that scrolling stops at the last item.
—
### **Further Enhancements**
– Add **previous navigation** by adding a back button that moves to the previous item.
– Implement **keyboard navigation** (`ArrowUp` / `ArrowDown`).
– Add a **looping effect** so when it reaches the last item, it goes back to the first one.
Let me know if you need modifications! 🚀
—
### **Fixed & Optimized JavaScript**
document.addEventListener('DOMContentLoaded', function () {
const scrollContainer = document.querySelector('.post-blog-scroll');
if (scrollContainer) {
const contentContainer = scrollContainer.querySelector('.post-scroll-content');
const items = Array.from(contentContainer.querySelectorAll('.post-scroll-item'));
const imageContainer = document.querySelector('.post-scroll-image');
let currentIndex = 0; // Track the active item index
// Function to update active item and image
function updateActiveItem(index) {
if (index < 0 || index >= items.length) return; // Prevent out-of-bound errors
currentIndex = index;
const activeItem = items[currentIndex];
// Scroll to the active item smoothly
contentContainer.scrollTo({
top: activeItem.offsetTop - contentContainer.offsetTop,
behavior: 'smooth'
});
// Reset opacity for all items and highlight the active one
items.forEach(item => item.style.opacity = '0.5');
activeItem.style.opacity = '1';
// Update the image
const imgSrc = activeItem.getAttribute('data-img');
if (imgSrc && imageContainer) {
imageContainer.innerHTML = `<img src="${imgSrc}" alt="Scroll Image" />`;
}
}
// Click event to move to the next item
contentContainer.addEventListener('click', function () {
if (currentIndex < items.length - 1) {
updateActiveItem(currentIndex + 1);
} else {
updateActiveItem(0); // Loop back to the first item
}
});
// Scroll event to detect manual scrolling and update active item
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
) {
updateActiveItem(index);
}
});
});
// Initialize the first item as active
updateActiveItem(0);
}
});—
### **How This Fix Works**
1. ✅ **Fixes Click-Based Scrolling**
– Clicking inside `.post-scroll-content` moves to the next `.post-scroll-item`.
– Loops back to the first item when reaching the last one.
2. ✅ **Ensures Smooth Scrolling**
– Scrolls directly to the active item.
3. ✅ **Auto-Updates on Manual Scroll**
– Detects the user's scrolling and updates the active item accordingly.
4. ✅ **Corrects Opacity Handling**
– Highlights the active item and dims the others.
5. ✅ **Proper Image Update**
– Retrieves `data-img` attribute and updates `.post-scroll-image` dynamically.
—
### **Try This & Let Me Know If You Need Further Tweaks! 🚀**