Slider Scroll Functionality Fix
February 14, 2025 · AI Conversations
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
### **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!