使用 Intersection Observer 切换活动类

Question

我试图在滚动页面时更改我的部分的活动类。我正在使用 intersectionObserver，但感觉很受困。我需要从 activeId 获取 activeElement 但不知道如何执行此操作。这是我的代码：const options = {    threshold: 0.75}let observer = new IntersectionObserver(check, options);function check(entries) {    entries.forEach(entry => {        const activeId = entry.target.id;        const activeElement =     if(entry.isIntersecting){        activeElement.classList.toggle("your-active-class");    };});};sections.forEach(section => {    observer.observe(section);});

Answer 1

entry.isIntersecting直接用于classList.toggle()第二个（布尔）参数。

使用 options {threshold: 0}，或者根本不使用，因为阈值默认为0

const check = (entries) => entries.forEach(entry => {

  entry.target.classList.toggle("is-active", entry.isIntersecting);

});

const Obs = new IntersectionObserver(check);

document.querySelectorAll("section").forEach(el => Obs.observe(el));

* {margin:0; box-sizing: border-box;}

section {

  min-height: 100vh;

  transition: 0.5s;

  transform: scale(0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 70vh;

}

.is-active {

  transform: scale(1);

}

<section style="background: #0bf;">1</section>

<section style="background: #f0b;">2</section>

<section style="background: #fb0;">3</section>

<section style="background: #0fb;">4</section>