Estoy tratando de alcanzar el efecto similar a https://www.apple.com/iphone-13/ Es decir, cuando el usuario se desplaza y llega a una sección con control deslizante, el control deslizante se adhiere a la parte superior de la página, el desplazamiento se detiene a favor de cambiar diapositivas Cuando se hayan mostrado todas las diapositivas, el desplazamiento continúa. ¿Cómo puedo utilizar el evento de la rueda del mouse para detener el desplazamiento y comenzar a cambiar las diapositivas al arreglar el elemento? ¡Gracias!
const container = document.querySelector('.slider'); const slides = document.querySelectorAll('.slide'); window.addEventListener('scroll', () => { const scrollFromTop = window.pageYOffset if(scrollFromTop <= container.offsetTop) { container.classList.add('fixed') /*slides.forEach(element => { element.classList.remove('active') }) for(let i = 0; slides.length > i; i++) { slides[i].classList.add('active'); }*/ } }) * { margin: 0; padding: 0; box-sizing: border-box; } section { width: 100%; height: 500px; } section:nth-child(odd) { background-color: #666; } section.slider { background-color: #e03c0b; display: flex; justify-content: center; align-items: center; } .slide { display: none; text-align: center; width: 50%; height: 200px; background-color: #888; } .slide.active { display: block; } .fixed { position: fixed; top: 0; } <section></section> <section></section> <section></section> <section class="slider"> <div class="slide active">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> </section> <section></section> <section></section>Si lo que está solicitando es cambiar las diapositivas desplazándose, puede agregar un div pegajoso dentro de un contenedor y usar javascript para traducir el contenedor de diapositivas en el desplazamiento. Nota: tendrá que haber algunos errores resueltos ya que acabo de preparar esto rápidamente, pero debería darle una idea del concepto y ayudarlo a comenzar.
Algo como lo siguiente:
const container = document.querySelector('.slide-container') const slides = document.querySelector('.slides') const containerRect = container.getBoundingClientRect() const slideRect = slides.getBoundingClientRect() const containerTop = containerRect.top const containerHeight = containerRect.height const slideWidth = slideRect.width const scrollDistance = containerHeight - window.innerHeight const slideDistance = slideWidth - window.innerWidth const getProgress = (start, distance, scroll) => { return Math.min(1, Math.max(0, (scroll - start) / distance)) } const handleScroll = () => { const scrollPos = window.scrollY const progress = getProgress(containerTop, scrollDistance, scrollPos) slides.style.transform = `translateX(-${slideDistance * progress}px)` } window.addEventListener('scroll', handleScroll) *{ box-sizing: border-box; } body,html{ padding: 0; margin: 0; } .slide-container{ height: 400vh; width: 100%; } .sticky-container{ position:sticky; top: 0; height: 100vh; width: 100%; overflow:hidden; } .slides{ height: 100vh; width: 400vw; display:flex; border: 5px dashed green; } .slide{ flex: 1; margin: 20px; background: blue; } <div style="height: 400px">Scroll Down</div> <div class="slide-container"> <div class="sticky-container"> <div class="slides"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> </div> </div> <div style="height: 400px"></div>