document.addEventListener("DOMContentLoaded", function () { const slider = document.querySelector(".vertical-snap"); const slides = [...document.querySelectorAll(".snap-slide")]; if (!slider || !slides.length) return; let isAnimating = false; let currentIndex = 0; let snapTimeout = null; let releasedAtBottom = false; let releasedAtTop = false; function getNearestIndex() { let best = 0; let bestDist = Infinity; slides.forEach((slide, i) => { const dist = Math.abs(slide.getBoundingClientRect().top); if (dist < bestDist) { bestDist = dist; best = i; } }); return best; } function sliderInView() { const rect = slider.getBoundingClientRect(); return rect.top 0; } function goTo(index) { if (index = slides.length || isAnimating) return; isAnimating = true; currentIndex = index; slides[index].scrollIntoView({ behavior: "smooth" }); setTimeout(() => { isAnimating = false; }, 900); } window.addEventListener("scroll", () => { if (!sliderInView() || isAnimating) return; const lastRect = slides[slides.length - 1].getBoundingClientRect(); const firstRect = slides[0].getBoundingClientRect(); // User scrolled past last slide via scrollbar if (lastRect.bottom window.innerHeight * 0.5) { releasedAtTop = true; } if (releasedAtBottom || releasedAtTop) { clearTimeout(snapTimeout); return; } const nearest = getNearestIndex(); const rect = slides[nearest].getBoundingClientRect(); if (nearest === slides.length - 1 && rect.bottom window.innerHeight) return; clearTimeout(snapTimeout); snapTimeout = setTimeout(() => { if (isAnimating) return; const idx = getNearestIndex(); const r = slides[idx].getBoundingClientRect(); if (Math.abs(r.top) > 10) goTo(idx); }, 150); }); window.addEventListener("wheel", e => { if (!sliderInView() || isAnimating) return; const delta = e.deltaY; if (Math.abs(delta) 0; const goingUp = delta < 0; if (releasedAtBottom && goingDown) return; if (releasedAtTop && goingUp) return; if (goingUp && releasedAtBottom) { const lastRect = slides[slides.length - 1].getBoundingClientRect(); if (lastRect.top 0) { releasedAtTop = false; } else { return; } } if (goingDown && current === slides.length - 1) { releasedAtBottom = true; return; } if (goingUp && current === 0) { releasedAtTop = true; return; } e.preventDefault(); e.stopImmediatePropagation(); clearTimeout(snapTimeout); goingDown ? goTo(current + 1) : goTo(current - 1); }, { passive: false, capture: true }); window.addEventListener("keydown", e => { if (!sliderInView() || isAnimating) return; const down = ["ArrowDown", "PageDown", " "]; const up = ["ArrowUp", "PageUp"]; if (![...down, ...up].includes(e.key)) return; const current = getNearestIndex(); if (down.includes(e.key) && current === slides.length - 1) return; if (up.includes(e.key) && current === 0) return; e.preventDefault(); clearTimeout(snapTimeout); down.includes(e.key) ? goTo(current + 1) : goTo(current - 1); }); });