使用滑块到达特定部分时停止滚动

Question

我试图达到类似于https://www.apple.com/iphone-13/的效果，即当用户滚动并到达带有滑块的部分时，滑块粘在页面顶部，滚动停止以利于切换幻灯片。 显示所有幻灯片后，继续滚动。 如何在固定元素后利用鼠标滚轮事件停止滚动并开始切换幻灯片？ 谢谢！

 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>

Answer 1

如果您要求的是通过滚动来切换幻灯片，那么您可以在容器内添加一个粘性 div 并使用 javascript 在滚动时翻译幻灯片容器。 注意：必须解决一些错误，因为我只是快速地提出了这个问题，但它应该让您了解这个概念并让您开始。

类似于以下内容：

 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>