@Vasya-prijevalskij

Почему не получается вычислить высоту этих элементов?

Всем привет. У меня есть, к примеру, вот такая структура html:
<div class="main-col">
 <div class="list-col">
  <div class="item-col">
   Текст
  </div>
  <div class="item-col">
   Текст
  </div>
  <div class="item-col">
   Текст
  </div>
 </div>
</div>

Мне необходимо, чтобы при скролле на конкретный элемент, срабатывала определенная функция в js. Пытаюсь это реализовать так:
let itemCol = document.querrySelectorAll('.item-col');
window.addEventListener('scroll', ()=> {
            scrollPos = window.scrollY;

            if(scrollPos >= itemCol[0].scrollHeight) {
                Какое-то действие
            }
            if(scrollPos >= itemCol[1].scrollHeight) {
                 Какое-то действие
            } 
            if(scrollPos >= itemCol[2].scrollHeight) {
                 Какое-то действие
            }

Но почему-то событие отрабатывает как-то криво. Т.е. при скролле на первый элемент, событие отрабатывает как нужно. Но со вторым и третим элементом уже проблемы: событие скролла почему-то срабатывает гораздо раньше, чем нужно. Т.е. я даже увидеть второй и третий блоки не успел, а действие уже выполняется.
Я неверно как-то вычисляю высоту дочерних элементов? .scrollHeight не подходит и нужно что-то другое? Подскажите, пожалуйста
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
во первых лучше уж clientHeight, так как scrollHeight учитывает высоту контента, а не бокса.
во вторых - используйте интерсекшн обсервер, он во первых не спамит евентами как скролл, во вторых достаточно предсказуемо работает, как раз работа с пересечениями его фишка.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы