Intersection Observer + CSS Scroll Snap（根据底层内容的滚动位置淡化修复 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>