获取颜色数组以将其放入函数中

Question

我正在处理 javascript IntersectionObserver 属性。

我想从colors 数组中获取颜色以将entry.target.style.backgroundColor= col; //changing to background color to the color from colors array 放在action 函数中。 但我得到的只有blue，这是colors数组的最后一个。

如何从数组中获取每种颜色并使其发挥作用？ 另外，向上滚动时是否可以将颜色恢复为原始背景颜色？

const sections = document.querySelectorAll('section');
const colors = ['green','brown', 'blue'];

for(let i=0; i < colors.length; i ++) {
  col = colors[i];
}

const action = function (entries) {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.style.backgroundColor= col;  //changing to background color to the color from colors array
    } else {
      return false;   // going back to original background color???
    }
  });
}

const options = {
  root: null,
  rootMargin: "30% 0px",
  threshold: 1
};

const observer = new IntersectionObserver(action, options);

sections.forEach(section => {
  observer.observe(section);
});

header { height: 100vh; background: #ccc;}
.block {
  position: relative;
  width: 100%;
  height: 100vh;
  transition: .5s;
}
.block1 {background: #666;}
.block2 { background: #aaa;}
.block3 { background: #333;}

<header>header</header>
<section class="block block1">green</section>
<section class="block block2">brown</section>
<section class="block block3">blue</section>

Answer 1

编辑：

根据IntersectionObserver api，我们不能调用takeRecords，因为它在回调中是空的（因为队列被刷新）（希望得到所有观察到的记录）

并且intersectionobserverentry 也不返回对观察到的节点的引用

因此我们可以回退到检索部分以从中获取当前条目索引

const sections = document.querySelectorAll('section');
const colors = ['green','brown', 'blue'];

const action = function (entries) {
  entries.forEach(entry => { 
    if(entry.isIntersecting) {
      // retrieve the entry's index from sections
      const i = [...sections].indexOf(entry.target)
      
      // or... traverse to its parent praying for all the observed entries to be there
      // console.log(entry.target.parentNode.querySelectorAll('section'))
      entry.target.style.backgroundColor= colors[i];  //changing to background color to the color from colors array
    } else {
      return false;   // going back to original background color???
    }
  });
}

const options = {
  root: null,
  rootMargin: "30% 0px",
  threshold: 1
};

const observer = new IntersectionObserver(action, options);

sections.forEach(section => {
  observer.observe(section);
});

header { height: 100vh; background: #ccc;}
.block {
  position: relative;
  width: 100%;
  height: 30vh;
  transition: .5s;
}
.block1 {background: #666;}
.block2 { background: #aaa;}
.block3 { background: #333;}

<header>header</header>
<section class="block block1">green</section>
<section class="block block2">brown</section>
<section class="block block3">blue</section>

Answer 2

实现它的一种方法是使用 CSS 类。因此，当元素相交时，添加一个 intersecting 类，如果不是，则将其删除。并具有匹配块的相应 CSS。我不太确定 IntersectionObserver 选项，但我已更改它们以让您了解此方法的工作原理。

const sections = document.querySelectorAll('section');

const action = function(entries) {
  entries.forEach(entry => {
    const elem = entry.target;
    if (entry.isIntersecting) {
      if (!elem.classList.contains("intersect")) {
        elem.classList.add("intersect");
      }
    } else {
      elem.classList.remove("intersect");
    }
  });
}

const options = {
//  root: null,
//    rootMargin: "30% 0px",
  threshold: 0.5
};

const observer = new IntersectionObserver(action, options);

sections.forEach(section => {
  observer.observe(section);
});

header {
  height: 100vh;
  background: #ccc;
}

.block {
  position: relative;
  width: 100%;
  height: 100vh;
  transition: .5s;
}

.block1 {
  background: #666;
}

.block1.intersect {
  background: green;
}

.block2 {
  background: #aaa;
}

.block2.intersect {
  background: brown;
}

.block3 {
  background: #333;
}

.block3.intersect {
  background: blue;
}

<header>header</header>
<section class="block block1">green</section>
<section class="block block2">brown</section>
<section class="block block3">blue</section>