.container
  for i in (new Array(10000))
    .test
  h1.scroll 
    | Scroll
    a(target="_blank", href="http://caniuse.com/#search=intersection") IntersectionObserver

body, html {
  background: #212121;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 1000vw;
  height: 1000vh;
}
.test {
  flex: 0 0 10vw;
  height: 10vh;
  background: gold;
  transition: 500ms background-color;
  margin: 0;
  will-change: background-color;
  &.is-visible {
    background: hotpink;
  }
}

.scroll {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  text-transform: uppercase;
  text-align: center;
  a {
    display: block;
    text-transform: lowercase;
    font-size: .5em;
    color: #fff;
    font-weight: normal;
  }
}

const elements = Array.from(document.querySelectorAll('.test'));
const observer = new IntersectionObserver(onChange, {
  root: document.documentElement.body, //scollable element, is Body if not specified
  rootMargin: '0px', // grows or shrinks the intersection boundingbox of the root
  threshold: buildThresholdList(parseFloat(elements.length, 2))
});

function buildThresholdList(steps) {
  let thresholds = [];
  
  thresholds.push(0);
  
  for (let i=1.0; i<=steps; i++) {
    const ratio = i/steps;
    thresholds.push(ratio);
  }
  
  return thresholds;
}

function onChange(changes) {
  changes.forEach(change => {
    const $target = change.target;
    if(change.isIntersecting) {
      $target.classList.add('is-visible');
    } else {
      $target.classList.remove('is-visible');
    }
  })
}

elements.forEach(element => observer.observe(element));