获取颜色数组以将其放入 function

Question

我正在研究 javascript IntersectionObserver 属性。

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

如何从数组中获取每种颜色并将它们放入 function？ 另外，向上滚动时是否可以将颜色恢复为原始背景颜色？

 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的 class ，如果不是，则将其删除。 并有对应的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>