jQuery Smooth Scrolling Update

February 14, 2025 · AI Conversations

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();
});
scroll to the page when slides finished

Assistant

To ensure smooth scrolling to the rest of the page after the last slide is reached, you can modify the scroll behavior. Here's how:

### Changes:
1. **Allow normal scrolling after the last slide:** If the user scrolls beyond the last slide, remove the `preventDefault()` behavior.
2. **Enable body scrolling when slides are finished:** If the user scrolls past the last slide, let the normal page scroll continue.

### 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;
    }

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

### What’s Changed?
– **If the last slide is reached, default scrolling resumes**:
– `preventDefault()` is only applied when `currentIndex < totalSlides – 1`.
– This allows the user to scroll naturally to the rest of the page when slides are finished.

Now, once the last slide is displayed, the user can scroll down naturally to view the rest of the page. 🚀

User

making scrolling slide chage effect only in paritcular div area

Assistant

To restrict the scrolling effect to a particular `div` (e.g., `.slider-container`), you need to:

1. **Check if the user is inside the `.slider-container`.**
2. **Apply the scroll effect only when hovering over the `.slider-container`.**
3. **Allow normal scrolling elsewhere.**

—

### **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 isCursorInsideSlider(event) {
        const rect = sliderContainer[0].getBoundingClientRect();
        return (
            event.clientX >= rect.left &&
            event.clientX <= rect.right &&
            event.clientY >= rect.top &&
            event.clientY <= rect.bottom
        );
    }

    $(window).on("wheel", function (event) {
        if (!isCursorInsideSlider(event.originalEvent)) return; // Restrict effect inside `.slider-container`

        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).on("resize", function () {
        updateSliderHeight();
        scrollToSection(currentIndex, false);
    });

    updateSliderHeight();
});

—

### **Key Changes:**
✅ **Scrolling Effect Works Only Inside `.slider-container`:**
– The function `isCursorInsideSlider(event)` checks if the mouse pointer is within `.slider-container` before applying the scrolling effect.

✅ **Rest of the Page Scrolls Normally:**
– If the mouse is **outside** `.slider-container`, normal page scrolling works.

—

### **Now, the scrolling slide effect only works when the user is inside the designated div (`.slider-container`).** 🎯

User

after added above scrollin item change not working

Assistant

It looks like the `event.originalEvent` is not passing the correct values inside `isCursorInsideSlider(event)`. Let's refine the logic and make sure the scrolling inside `.slider-container` works while keeping normal scrolling elsewhere.

—

### **Fixed 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");
    let isMouseOverSlider = false; // Track whether the mouse is over the slider

    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", `translateY(${offset}px)`); // Fixed transform

            slides.removeClass("active");
            slides.eq(index).addClass("active");

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

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

    // Detect if the cursor is inside the slider
    sliderContainer.on("mouseenter", function () {
        isMouseOverSlider = true;
    });

    sliderContainer.on("mouseleave", function () {
        isMouseOverSlider = false;
    });

    $(window).on("wheel", function (event) {
        if (!isMouseOverSlider) return; // Only trigger scroll inside `.slider-container`

        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).on("resize", function () {
        updateSliderHeight();
        scrollToSection(currentIndex, false);
    });

    updateSliderHeight();
});

—

### **Fixes & Improvements:**
✅ **Corrected transform property:**
– Fixed `sliderWrapper.css("transform", `translateY(${offset}px)`)`;
– Your original code used `translate(-50%, ${offset}px)`, which might not be necessary.

✅ **Detects if mouse is over `.slider-container`:**
– Added `mouseenter` and `mouseleave` events to track when the user is hovering over the slider.
– Uses `isMouseOverSlider` instead of `event.clientX` checks.

✅ **Ensures smooth scrolling within the slider only.**
– When outside `.slider-container`, normal scrolling resumes.

—

### **Now, the scrolling effect works only inside `.slider-container`, and normal page scrolling functions elsewhere.** 🚀
Try this version and let me know if you need further refinements! 🎯

User

Not working left side image gone

Assistant

It looks like the `translate(-50%, ${offset}px)` transformation was originally positioning your slides in a centered layout. If your `.slider-wrapper` was already using `position: absolute` or `position: fixed` with `left: 50%`, then the `translate(-50%, Ypx)` might have been necessary.

To fix your issue while ensuring the scrolling works properly, let's restore the original transformation logic but with corrections:

—

### **Fixed 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");
    let isMouseOverSlider = false; // Track whether the mouse is over the slider

    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)`); // Restore original transform

            slides.removeClass("active");
            slides.eq(index).addClass("active");

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

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

    // Detect if the cursor is inside the slider
    sliderContainer.on("mouseenter", function () {
        isMouseOverSlider = true;
    });

    sliderContainer.on("mouseleave", function () {
        isMouseOverSlider = false;
    });

    $(window).on("wheel", function (event) {
        if (!isMouseOverSlider) return; // Only trigger scroll inside `.slider-container`

        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).on("resize", function () {
        updateSliderHeight();
        scrollToSection(currentIndex, false);
    });

    updateSliderHeight();
});

—

### **Key Fixes:**
✅ **Restored `translate(-50%, Ypx)`,** so your images or elements remain correctly aligned.
✅ **Ensures the scrolling only happens when hovering over `.slider-container`.**
✅ **Fixes issue where the left-side image disappears by maintaining the correct transform positioning.**

Now your full-page slider should work within a specific div while keeping its layout intact. Let me know if you still face issues! 🚀

User

this code works but its make scroll out side on every scrooll

Assistant

It sounds like the page is still scrolling when you're interacting with the `.slider-container`, even though the slide effect is working. We need to **prevent page scrolling while scrolling inside the slider** and allow normal scrolling outside of it.

—

### **Updated Solution:**
1. **Prevent page scrolling only inside `.slider-container`.**
2. **Allow normal scrolling outside.**
3. **Ensure smooth transitions.**

—

### **Fixed 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");
    let isMouseOverSlider = false;

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

    // Detect if the cursor is inside the slider
    sliderContainer.on("mouseenter", function () {
        isMouseOverSlider = true;
        $("body").css("overflow", "hidden"); // Prevent scrolling when inside slider
    });

    sliderContainer.on("mouseleave", function () {
        isMouseOverSlider = false;
        $("body").css("overflow", "auto"); // Allow normal page scrolling
    });

    $(window).on("wheel", function (event) {
        if (!isMouseOverSlider) return; // Only trigger scroll inside `.slider-container`
        event.preventDefault(); // Stop page from scrolling

        if (isScrolling) return;

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

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

    updateSliderHeight();
});

—

### **Improvements:**
✅ **Stops page scrolling inside `.slider-container` using `overflow: hidden`.**
✅ **Allows normal scrolling outside the `.slider-container`.**
✅ **Ensures smooth slide transitions without affecting the whole page.**
✅ **Restores `overflow: auto` when leaving the slider area.**

—

### **How it Works:**
– When your cursor **enters** `.slider-container`, the page scrolling is disabled (`overflow: hidden`).
– When your cursor **leaves**, normal page scrolling is restored (`overflow: auto`).
– The scrolling is now **completely isolated** inside the slider div.

🚀 **Now it should work perfectly without affecting the rest of the page!** Let me know if you need more tweaks! 😊

User

but i need when scroll finished then start normal scrolling for the page

Assistant

Got it! You want to **lock scrolling inside the slider** until the last slide is reached, then allow normal page scrolling.

—

### **Solution:**
✅ **Disable page scroll inside `.slider-container` until the last slide is reached.**
✅ **Once the last slide is reached, allow normal page scrolling.**
✅ **If scrolling back up from the last slide, re-lock page scrolling.**

—

### **Fixed 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");
    let isMouseOverSlider = false;
    let isLastSlide = false;

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

        // Enable normal scrolling only when the last slide is reached
        if (index === totalSlides - 1) {
            $("body").css("overflow", "auto");
            isLastSlide = true;
        } else {
            $("body").css("overflow", "hidden");
            isLastSlide = false;
        }
    }

    // Detect if the cursor is inside the slider
    sliderContainer.on("mouseenter", function () {
        isMouseOverSlider = true;
        if (!isLastSlide) {
            $("body").css("overflow", "hidden"); // Prevent page scroll inside slider
        }
    });

    sliderContainer.on("mouseleave", function () {
        isMouseOverSlider = false;
    });

    $(window).on("wheel", function (event) {
        if (!isMouseOverSlider && !isLastSlide) return; // Allow normal scroll outside slider
        event.preventDefault(); // Stop default page scroll

        if (isScrolling) return;

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

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

    updateSliderHeight();
});

—

### **How It Works:**
– **Prevents page scrolling** while inside `.slider-container` unless the last slide is reached.
– **Once the last slide is reached**, `overflow: auto` is restored, allowing normal page scrolling.
– **If scrolling back up,** page scrolling is locked again until the user reaches the last slide.

—

🚀 **Now scrolling is locked inside the slider until the last slide is reached, then normal scrolling starts!** Let me know if you need further refinements. 😊

jQuery Smooth Scrolling Update

Leave a Comment Cancel