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