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

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) {&nbsp; entries.forEach(entry => {&nbsp;&nbsp; &nbsp; if(entry.isIntersecting) {&nbsp; &nbsp; &nbsp; // retrieve the entry's index from sections&nbsp; &nbsp; &nbsp; const i = [...sections].indexOf(entry.target)&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // or... traverse to its parent praying for all the observed entries to be there&nbsp; &nbsp; &nbsp; // console.log(entry.target.parentNode.querySelectorAll('section'))&nbsp; &nbsp; &nbsp; entry.target.style.backgroundColor= colors[i];&nbsp; //changing to background color to the color from colors array&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp;// going back to original background color???&nbsp; &nbsp; }&nbsp; });}const options = {&nbsp; root: null,&nbsp; rootMargin: "30% 0px",&nbsp; threshold: 1};const observer = new IntersectionObserver(action, options);sections.forEach(section => {&nbsp; observer.observe(section);});header { height: 100vh; background: #ccc;}.block {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 30vh;&nbsp; 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) {&nbsp; entries.forEach(entry => {&nbsp; &nbsp; const elem = entry.target;&nbsp; &nbsp; if (entry.isIntersecting) {&nbsp; &nbsp; &nbsp; if (!elem.classList.contains("intersect")) {&nbsp; &nbsp; &nbsp; &nbsp; elem.classList.add("intersect");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; elem.classList.remove("intersect");&nbsp; &nbsp; }&nbsp; });}const options = {//&nbsp; root: null,//&nbsp; &nbsp; rootMargin: "30% 0px",&nbsp; threshold: 0.5};const observer = new IntersectionObserver(action, options);sections.forEach(section => {&nbsp; observer.observe(section);});header {&nbsp; height: 100vh;&nbsp; background: #ccc;}.block {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 100vh;&nbsp; transition: .5s;}.block1 {&nbsp; background: #666;}.block1.intersect {&nbsp; background: green;}.block2 {&nbsp; background: #aaa;}.block2.intersect {&nbsp; background: brown;}.block3 {&nbsp; background: #333;}.block3.intersect {&nbsp; background: blue;}<header>header</header><section class="block block1">green</section><section class="block block2">brown</section><section class="block block3">blue</section>