交集观察者+ CSS滚动捕捉(根据滚动在底层内容上的位置渐变修复div)

Question

我正在尝试重新创建Tesla.com滚动快照/淡出效果。我必须承认我是一个完全的JS新手，不知道我用它做什么。

到目前为止，我设法在固定的div上有滚动快照工作和淡出文本。问题是，我不知道如何定位和设置可见性，以隐藏不在视图中的div。

因此，这些图层中的任何按钮都会一直位于顶部，并干扰活动部分。

将鼠标悬停在每个部分的链接上可以看到问题。然而，链接总是指向#3。它应该是#1，#2和#3根据可见内容。

我已经尝试修改https://isotropic.co/css-scroll-snap-tutorial/

上的代码，但失败了我想我可以简单地加上:

section__contents.classList.add("in-visible";

，但这不起作用，并抛出错误。我觉得我用的代码对我要做的事情来说太复杂了。

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>