Блог

Главная - Вопросы по программированию - Как проверить, когда пользователь передал дочерние элементы прокручиваемого div?

Как проверить, когда пользователь передал дочерние элементы прокручиваемого div?

#javascript #html #css #scroll

#javascript #HTML #css #прокрутка

Вопрос:

У меня есть #outer div, который можно прокручивать по горизонтали. Я хочу, чтобы, когда пользователь прокручивает каждый из своих дочерних div, его дочерний div становился розовым. Прямо сейчас, только когда пользователь передает последний дочерний div, все они становятся розовыми. как я могу это исправить?

Спасибо!

Моя функция:

 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';
    }
  }
}

Пример:

 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;
}  
 <div id='outer' onscroll='makeVisible()'>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

Комментарии:

1. Должно ли это быть if (outer.scrollLeft > outers[i].offsetLeft) или if (outer.scrollLeft > outers[i].offsetLeft outers[i].offsetWidth)

2. @CraftedPod оба «если» заканчиваются тем, что несколько ячеек слева становятся розовыми. Что именно OP хочет здесь иметь? Я не уверен.