Всем привет. У меня есть, к примеру, вот такая структура 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 не подходит и нужно что-то другое? Подскажите, пожалуйста
