Как найти расстояние от scrollTop?

Question

я this fiddle:

var outer = document.querySelectorAll('.outer'); 
 

 
setInterval(function() { 
 
    // console.log(outer.scrollY); // undefined 
 
    // console.log(outer.scrollTop); // undefined 
 
}, 500);

.outer { 
 
    width: 220px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 
.inner { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 120px; 
 
}

<div class="outer"> 
 
    <div class="inner" style="background-color:red"></div> 
 
    <div class="inner" style="background-color:yellow"></div> 
 
    <div class="inner" style="background-color:green"></div> 
 
    <div class="inner" style="background-color:blue"></div> 
 
</div>

Мне нужен setInterval, чтобы получить правильное расстояние от верхней. Но он всегда возвращает undefined. Я прочитал некоторые связанные вопросы, единственная разница, которую я обнаружил, заключается в том, что я не использую window.scrollTop, но это потому, что я не прокручу window, я прокручу элемент .outer. Мне нужно знать outer.scrollTop, в котором у меня проблемы.

Любые идеи?

Answer 1

Это не работает должным образом, потому что .querySelectorAll() method возвращает NodeList элементов. Вы пытаетесь получить свойство scrollTop коллекции (что, очевидно, не работает). Вам необходимо получить свойство scrollTop определенного элемента в коллекции.

Вы можете получить доступ к первому элементу в этом NodeList:

var outer = document.querySelectorAll('.outer'); 

setInterval(function() { 
    console.log(outer[0].scrollTop); 
}, 500); 

Или использовать .querySelector() method вместо:

var outer = document.querySelector('.outer'); 

setInterval(function() { 
    console.log(outer.scrollTop); 
}, 500);