jQuery Fullscreen Slide Scrolling

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();
});
make scrolling behaviour when mouse wheel or keyboard up and down other do normal scrolling page

Assistant
Here's an improved version of your script that allows smooth full-screen slide scrolling when using the mouse wheel or keyboard arrow keys while allowing normal scrolling behavior for other interactions like touch gestures or horizontal scrolling.

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 handleScroll(event) {
        if (!isSliderInView()) return;

        if (isScrolling) return;

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

    function handleKeyboard(event) {
        if (!isSliderInView()) return;

        if (isScrolling) return;

        if (event.key === "ArrowDown") {
            if (currentIndex < totalSlides - 1) {
                event.preventDefault();
                currentIndex++;
                scrollToSection(currentIndex);
            }
        } else if (event.key === "ArrowUp") {
            if (currentIndex > 0) {
                event.preventDefault();
                currentIndex--;
                scrollToSection(currentIndex);
            }
        }
    }

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

    $(window).on("wheel", handleScroll);
    $(document).on("keydown", handleKeyboard);

    updateSliderHeight();
    updateSlideFromHash();
});

### **Key Features of This Update:**
✅ **Mouse Wheel (Scroll Up/Down)** – Triggers full-screen slide scrolling when in view.
✅ **Arrow Keys (Up/Down)** – Allows navigation with keyboard keys for an intuitive experience.
✅ **Normal Page Scrolling** – Other scrolling behaviors (e.g., touch gestures, horizontal scrolling) will remain unaffected.
✅ **Auto Height Adjustment** – The slider height updates on window resize.
✅ **Deep Linking with Hash Updates** – URL updates with `#slide-x`, allowing direct access to specific slides.
✅ **Prevent Default Only When Needed** – Default browser scrolling remains unchanged unless the slider is in focus.

This ensures a smooth scrolling experience while keeping normal page interactions intact. 🚀

Leave a Comment

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