Scroll Nav Limit Fix

User

if ($('.overlay-slider-grid').length) {
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $mainparent = $overlaySliderGrid.find('.content-overlayslider');
const $hoverItems = $mainparent.find('.hover-item');

let currentIndex = 0; // For tracking the selected item for keyboard navigation or scroll
let xPos = 0; // Initialize xPos
let yPos = 0; // Initialize yPos

// Function to update background and content
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);

$item.find('.content').addClass('active');
$item.find('.description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};

// Scroll event for hover items (mouse wheel)
$hoverItems.on('wheel', function (e) {
e.preventDefault(); // Prevent default scroll behavior
const delta = e.originalEvent.deltaY;

if (delta > 0) { // Scroll Down
currentIndex = (currentIndex + 1) % $hoverItems.length;
} else if (delta < 0) { // Scroll Up
currentIndex = (currentIndex – 1 + $hoverItems.length) % $hoverItems.length;
}

updateSlider($hoverItems.eq(currentIndex));
});

// Keyboard navigation (up/down arrow keys)
$(document).on('keydown', function (e) {
if (e.key === 'ArrowUp') {
currentIndex = (currentIndex – 1 + $hoverItems.length) % $hoverItems.length;
updateSlider($hoverItems.eq(currentIndex));
} else if (e.key === 'ArrowDown') {
currentIndex = (currentIndex + 1) % $hoverItems.length;
updateSlider($hoverItems.eq(currentIndex));
}
});

// Intersection Observer to detect visibility of the overlay-slider-grid
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.5
};

observer.observe($overlaySliderGrid[0]);

// Browser scrollbar event to update content
$(window).on('scroll', function () {
const scrollTop = $(window).scrollTop();
const overlayOffset = $overlaySliderGrid.offset().top;
const overlayHeight = $overlaySliderGrid.outerHeight();

if (scrollTop >= overlayOffset && scrollTop

Assistant

To **prevent the slider from looping back to the first item** when scrolling to the end of the list, you just need to remove the modulus-based logic (`%`) that wraps around the `currentIndex`. Instead, **limit it within the valid range** (`0` to `$hoverItems.length – 1`).

Here's the updated logic in your script:

### ✅ Replace this part:

if (delta > 0) { // Scroll Down
    currentIndex = (currentIndex + 1) % $hoverItems.length;
} else if (delta < 0) { // Scroll Up
    currentIndex = (currentIndex - 1 + $hoverItems.length) % $hoverItems.length;
}

### 🚀 With this:

if (delta > 0 && currentIndex < $hoverItems.length - 1) {
    currentIndex++;
} else if (delta < 0 && currentIndex > 0) {
    currentIndex--;
}

### Similarly, update the keyboard navigation:

if (e.key === 'ArrowUp' && currentIndex > 0) {
    currentIndex--;
    updateSlider($hoverItems.eq(currentIndex));
} else if (e.key === 'ArrowDown' && currentIndex < $hoverItems.length - 1) {
    currentIndex++;
    updateSlider($hoverItems.eq(currentIndex));
}

### Now your scroll/keyboard nav will:
– Go **up/down** within range
– **Not wrap around** to the beginning or end
– **Stop** when the first or last item is reached

Let me know if you want to add visual feedback (e.g. disable scroll or show a message) when the limits are reached.

User

applied above changes but does not scroll down to page when slide finisher

Assistant

Thanks for the update. If you're expecting the **page to continue scrolling down normally** once the **last slider item is reached**, you’ll need to **allow native scroll** behavior when the slider reaches the end. Right now, the `e.preventDefault()` inside the `wheel` event is stopping page scroll entirely — even when there's no more slider item to scroll to.

—

### ✅ Fix: Only prevent default when there are more slider items to scroll

Update this block:

$hoverItems.on('wheel', function (e) {
    const delta = e.originalEvent.deltaY;

    if (delta > 0 && currentIndex < $hoverItems.length - 1) {
        e.preventDefault();
        currentIndex++;
        updateSlider($hoverItems.eq(currentIndex));
    } else if (delta < 0 && currentIndex > 0) {
        e.preventDefault();
        currentIndex--;
        updateSlider($hoverItems.eq(currentIndex));
    }
    // Else, allow default scroll
});

—

### Explanation:
– When you're not at the start or end, prevent scrolling and update slider.
– When you're **already at the last item** and scroll down again, do **not call `preventDefault()`**, so the browser continues scrolling down the page.

—

Let me know if you also want the page to auto-scroll to the next section when slider ends — that can be added too.

Leave a Comment Cancel