Получение цветового массива для помещения в функцию - PullRequest
Новая
       48

Получение цветового массива для помещения в функцию

1 голос
/ 29 апреля 2020

Я работаю над 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>

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Один из способов сделать это sh - это использовать 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>
1 голос
/ 29 апреля 2020

edit:

В соответствии с API IntersectionObserver мы не можем вызвать takeRecords, потому что он будет пустым в обратном вызове (так как очередь сбрасывается) (с помощью wi sh для получения все наблюдаемые записи)

И 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>
...