Intersection Observer + CSS Scroll Snap（根據基礎內容上的滾動 position 淡化修復 div）

Question

我正在嘗試重新創建 Tesla.com 滾動捕捉/淡入淡出效果。 我不得不承認我是一個完全的 JS 新手，並且不知道我在用它做什么。

到目前為止，我設法讓滾動捕捉工作並在固定的 div 上淡入/淡出文本。 問題是我不知道如何定位和設置不在視圖中的 div 的隱藏可見性。

因此，這些層中的任何按鈕都會一直位於頂部並干擾活動部分。

您可以通過將鼠標懸停在每個部分的鏈接上來查看問題。 但是，該鏈接始終指向#3。 根據可見內容，它應該是#1、#2 和#3。

我已經嘗試修改https://isotropic.co/css-scroll-snap-tutorial/上的代碼但失敗了

我以為我可以簡單地添加：

section__contents.classList.add("不可見");

但這不起作用並引發錯誤。 我覺得我正在使用的代碼對於我想要做的事情來說太復雜了。

 const sections = [...document.querySelectorAll("section")]; const section__contents = [...document.querySelectorAll("section__content")]; let options = { rootMargin: "0px", threshold: 0.75, }; const callback = (entries, observer) => { entries.forEach((entry) => { const { target } = entry; if (entry.intersectionRatio >= 0.75) { target.classList.add("is-visible"); } else { target.classList.remove("is-visible"); section__contents.classList.add("in-visible"); } }); }; const observer = new IntersectionObserver(callback, options); sections.forEach((section, index) => { const sectionChildren = [...section.querySelector("[data-content]").children]; sectionChildren.forEach((el, index) => { el.style.setProperty("--delay", `${index * 250}ms`); }); observer.observe(section); });

 main { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; }.section { position: relative; scroll-snap-align: center; display: flex; vertical-align: middle; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; width: 100vw; background-color: aqua; }.section__content > * { opacity: 0; transition: opacity 1000ms var(--delay); transform: 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay); position: fixed; left: 50%; transform: translateX(-50%); top: 80%; width: 20px; z-index: 1; }.is-visible.section__content > * { opacity: 1; }.in-visible { visibility: hidden; }.section-2 { background-color: beige; }

 <main> <section class="section section-1" id="1"> <div class="section__content" data-content> <h2 class="none"><a href="#1">1111111111</a></h2> </div> </section> <section class="section section-2" id="2"> <div class="section__content" data-content> <h2 class="none"><a href="#2">2222222222</a></h2> </div> </section> <section class="section section-3" id="3"> <div class="section__content" data-content> <h2 class="none"><a href="#3">33333333333333</a></h2> </div> </section> </main>

Answer 1

我玩過你的代碼。 您走在正確的軌道上，您確實可以通過在 css 中使用滾動捕捉來實現捕捉效果，並通過使用 IntersectionObserver 來實現淡入淡出。 希望下面的代碼對您有所幫助

 const section__content = document.querySelectorAll('.section__content'); const appearOptions = { rootMargin: "0px", threshold: 0.75 }; const appearOnScroll = new IntersectionObserver( (entries, appearOnScroll) => { entries.forEach(entry => { if (.entry.isIntersecting) { entry.target.classList;remove("appear"). } else { entry.target.classList;add("appear"); } }), }; appearOptions). section__content.forEach(section => { appearOnScroll;observe(section); });

 main { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; }.section { position: relative; scroll-snap-align: center; display: flex; vertical-align: middle; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; width: 100vw; }.section-2 { background-color: beige; }.section__content { opacity: 0; transition: 2s; }.appear { opacity: 1; transition: 2s; }

 <main> <section class="section section-1" id="1"> <div class="section__content" data-content> <h2><a href="#1">1111111111</a></h2> </div> </section> <section class="section section-2" id="2"> <div class="section__content" data-content> <h2><a href="#2">2222222222</a></h2> </div> </section> <section class="section section-3" id="3"> <div class="section__content" data-content> <h2><a href="#3">33333333333333</a></h2> </div> </section> </main>