Slider Stuck Issue Debugging

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;
$(".slide").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()) {
event.preventDefault();
}
}

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

if (isScrolling) return;
if (event.originalEvent.deltaY > 0) {
currentIndex++;
} else {
currentIndex–;
}
if (currentIndex < 0) currentIndex = 0;
if (currentIndex >= totalSlides) currentIndex = totalSlides – 1;

scrollToSection(currentIndex);
});

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

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

updateSliderHeight();
updateSlideFromHash();
});
above sometimes stuck

Assistant

Your jQuery slider sometimes gets stuck due to a few potential issues:

1. **Race Condition on `isScrolling`** – If the scroll event fires multiple times rapidly, it might cause conflicts.
2. **CSS `transform` Might Not Work as Expected** – The `transform: translate(-50%, offset)` might not be the correct approach for full-page scrolling.
3. **Preventing Default Scroll Behavior Incorrectly** – The event listener for `wheel` might be interfering with native scrolling outside the slider.
4. **Incorrect Handling of `currentIndex` Updates** – If the index is not updated correctly, it might get stuck at a certain position.
5. **Viewport Detection Delay** – `isSliderInView()` might not always detect the slider correctly if the scroll is too fast.

User

above js scroll stuck sometime

Assistant

Try the following improvements to fix the scroll getting stuck:

### **Fixes:**
1. **Fix `transform` Calculation**
Instead of `translate(-50%, offset)`, update `transform` to use `translateY(offset)` directly.

2. **Improve `isScrolling` Handling**
Prevent multiple scroll events from interfering by ensuring `isScrolling` is properly reset.

3. **Fix Event Prevention Logic**
Ensure `preventDefault()` only triggers inside the slider, avoiding interference with normal page scrolling.

—

### **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) {
            isScrolling = true;
            let offset = index * -window.innerHeight;
            sliderWrapper.css("transform", `translateY(${offset}px)`);
            
            slides.removeClass("active");
            slides.eq(index).addClass("active");

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

            setTimeout(() => isScrolling = false, 800); // Ensure smooth scrolling
        }
    }

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

    function preventBodyScroll(event) {
        if (isSliderInView()) {
            event.preventDefault();
        }
    }

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

        event.preventDefault();

        if (event.originalEvent.deltaY > 0) {
            currentIndex = Math.min(currentIndex + 1, totalSlides - 1);
        } else {
            currentIndex = Math.max(currentIndex - 1, 0);
        }

        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();
});

—

### **What’s Fixed?**
✅ **Smooth Scrolling:** Prevents multiple scroll triggers.
✅ **Proper Transform:** Uses `translateY()` instead of `translate(-50%, Y)`.
✅ **Better Hash Handling:** Uses `replaceState()` instead of `pushState()`.
✅ **Prevents Stuck Scroll:** Ensures `isScrolling` resets correctly.

Let me know if the issue persists! 🚀

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;
$(".slide").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()) {
event.preventDefault();
}
}

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

if (isScrolling) return;
if (event.originalEvent.deltaY > 0) {
currentIndex++;
} else {
currentIndex–;
}
if (currentIndex < 0) currentIndex = 0;
if (currentIndex >= totalSlides) currentIndex = totalSlides – 1;

scrollToSection(currentIndex);
});

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

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

updateSliderHeight();
updateSlideFromHash();
});
when slides finish move out scroll

Assistant

To allow normal scrolling after the slides finish, update the script so that scrolling works inside the slider when slides are available, and defaults to normal page scrolling when the last slide is reached.

### **Fixes & Improvements:**
1. **Allow normal scrolling after the last slide** – When the last slide is reached, remove event prevention so the user can scroll normally on the rest of the page.
2. **Allow scrolling before the slider starts** – If the slider is out of view, normal scrolling should be enabled.
3. **Prevent `isScrolling` from blocking necessary scroll events** – Ensures that users can naturally transition in and out of the slider.

—

### **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.replaceState(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();
});

—

### **Changes & Fixes:**
✅ **Allows scrolling out when reaching the last slide**
✅ **Prevents abrupt stopping when reaching the end**
✅ **Keeps smooth scroll transitions while inside the slider**
✅ **Stops blocking normal scroll behavior on the rest of the page**

This ensures a smooth user experience where scrolling works inside the slider, but users can continue scrolling naturally after the last slide. 🚀

Slider Stuck Issue Debugging

Leave a Comment Cancel