How to check when user passed children of a scrollable div?

Question

I have a #outer div which is scrollable horizontally. I want that when the user is scrolling to each one of its child div, its child div would turn pink. Right now, Only when the user passes the last child div, they all turn pink. how can I fix it?

Thanks!

My function:

function makeVisible () {
  let outer = document.getElementById('outer');
  let outers = document.querySelectorAll('#outer div');
  for (let i = 0; i < outers.length; i++) {
    if (outer.scrollLeft > outers[i].offsetWidth) {
      outers[i].style.background = 'pink';
    }
  }
}

Example:

function makeVisible() {
  let outer = document.getElementById('outer');
  let outers = document.querySelectorAll('#outer div');
  for (let i = 0; i < outers.length; i++) {
    if (outer.scrollLeft > outers[i].offsetWidth) {
      outers[i].style.background = 'pink';
    }
  }
}

#outer {
  width: 500px;
  height: 100px;
  white-space: nowrap;
  position: fixed;
  top: 20%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#outer div {
  transition: 1s ease;
  width: 24.5%;
  vertical-align: middle;
  background: #eee;
  float: none;
  height: 90%;
  margin: 0 0.25%;
  display: inline-block;
  zoom: 1;
}

#outer div img {
  vertical-align: middle;
  display: inline-block;
  width: 20px;
  height: 20px;
}

How to check when user passed children of a scrollable div?

0 Answers