Slider Scroll Functionality Fix

User
jQuery(document).ready(function ($) {
let currentIndex = 0;
const slides = $(".slide");
const totalSlides = slides.length;
let isScrolling = false;
const sliderWrapper = $(".slider-wrapper");
const sliderContainer = $(".slider-container");

function updateSliderHeight() {
let slideHeight = window.innerHeight;
slides.css("height", slideHeight + "px");
}

function scrollToSection(index, updateHash = true) {
if (index >= 0 && index < totalSlides) {
isScrolling = true;
let offset = index * -window.innerHeight;
sliderWrapper.css("transform", `translate(-50%, ${offset}px)`);
slides.removeClass("active");
slides.eq(index).addClass("active");

if (updateHash) {
history.pushState(null, null, `#slide-${index + 1}`);
}

setTimeout(() => isScrolling = false, 800);
}
}

function isSliderInView() {
const rect = sliderContainer[0].getBoundingClientRect();
return rect.top < window.innerHeight && rect.bottom > 0;
}

function preventBodyScroll(event) {
if (isSliderInView() && currentIndex < totalSlides – 1) {
event.preventDefault();
}
}

$(window).on("wheel", function (event) {
if (!isSliderInView()) return;

if (isScrolling) return;

if (event.originalEvent.deltaY > 0) {
if (currentIndex < totalSlides – 1) {
event.preventDefault();
currentIndex++;
scrollToSection(currentIndex);
}
} else {
if (currentIndex > 0) {
event.preventDefault();
currentIndex–;
scrollToSection(currentIndex);
}
}
});

window.addEventListener("wheel", preventBodyScroll, { passive: false });

function updateSlideFromHash() {
const hash = window.location.hash;
if (hash.startsWith("#slide-")) {
let index = parseInt(hash.replace("#slide-", "")) – 1;
if (!isNaN(index) && index >= 0 && index < totalSlides) {
currentIndex = index;
scrollToSection(currentIndex, false);
}
}
}

$(window).on("resize", function () {
updateSliderHeight();
scrollToSection(currentIndex, false);
});

updateSliderHeight();
updateSlideFromHash();
});
Also, when scrolling is finished start normal behaive for both up and down

Assistant
You need to re-enable normal scrolling behavior after the last slide when scrolling down and before the first slide when scrolling up. Here’s how you can modify your script:

### **Key Fixes:**
1. **Enable Normal Scrolling After the Last Slide:**
– When reaching the last slide, allow normal scrolling.
2. **Enable Normal Scrolling Before the First Slide:**
– When scrolling up from the first slide, allow normal scrolling.
3. **Disable `preventDefault()` when at the start or end of slides.**

### **Updated Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

    function updateSliderHeight() {
        let slideHeight = window.innerHeight;
        slides.css("height", slideHeight + "px");
    }

    function scrollToSection(index, updateHash = true) {
        if (index >= 0 && index < totalSlides) {
            isScrolling = true;
            let offset = index * -window.innerHeight;
            sliderWrapper.css("transform", `translate(-50%, ${offset}px)`);
            slides.removeClass("active");
            slides.eq(index).addClass("active");

            if (updateHash) {
                history.pushState(null, null, `#slide-${index + 1}`);
            }

            setTimeout(() => {
                isScrolling = false;
            }, 800);
        }
    }

    function isSliderInView() {
        const rect = sliderContainer[0].getBoundingClientRect();
        return rect.top < window.innerHeight && rect.bottom > 0;
    }

    $(window).on("wheel", function (event) {
        if (!isSliderInView() || isScrolling) return;

        if (event.originalEvent.deltaY > 0) {
            if (currentIndex < totalSlides - 1) {
                event.preventDefault();
                currentIndex++;
                scrollToSection(currentIndex);
            } else {
                // If last slide, enable normal scrolling
                $(window).off("wheel");
            }
        } else {
            if (currentIndex > 0) {
                event.preventDefault();
                currentIndex--;
                scrollToSection(currentIndex);
            } else {
                // If first slide, enable normal scrolling
                $(window).off("wheel");
            }
        }
    });

    function updateSlideFromHash() {
        const hash = window.location.hash;
        if (hash.startsWith("#slide-")) {
            let index = parseInt(hash.replace("#slide-", "")) - 1;
            if (!isNaN(index) && index >= 0 && index < totalSlides) {
                currentIndex = index;
                scrollToSection(currentIndex, false);
            }
        }
    }

    $(window).on("resize", function () {
        updateSliderHeight();
        scrollToSection(currentIndex, false);
    });

    updateSliderHeight();
    updateSlideFromHash();
});

### **What’s Improved?**
✅ **Scrolling works only inside the slider**
✅ **Once you reach the last slide, normal scrolling resumes**
✅ **When scrolling up from the first slide, normal scrolling resumes**
✅ **Doesn't block body scroll unnecessarily**

This will make the transition from the slider to normal scrolling feel natural! 🚀 Let me know if you need further tweaks!

Leave a Comment

Your email address will not be published. Required fields are marked *