Почему свойство scrollTop элемента остается 0 при прокрутке?

Question

Я пытаюсь использовать свойство scrollTop в проекте.

Но это не имеет значения, что я делаю: оно всегда возвращает меня 0. Я работаю с Chrome. Пробовал Firefox тоже с тем же результатом.

Я сделал это демо:

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

 
wrap.addEventListener('scroll', function() { 
 
\t var sub = document.querySelector('.sub'); 
 

 
\t console.log(sub.scrollTop); \t 
 
});

body { 
 
    background-color: white; } 
 

 
.wrap { 
 
    padding: 10px; 
 
    border: 3px solid white; 
 
    background-color: white; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 600px; 
 
    height: 400px; 
 
    overflow: scroll; } 
 

 
.sub { 
 
    height: 1200px; 
 
    width: 200px; 
 
    background: linear-gradient(orange, green, blue, red); }

<div class="wrap"> 
 
    <div class="sub"></div> 
 
</div>

Что делать я неправильно?

Соответственно: Почему я возвращаю эти явно неправильные значения? Я бы ожидал примерно 800, когда он прокручивается до самого низа.

Answer 1

Свойство scrollTop должно быть считано с фактического элемента прокрутки .wrap в вашем случае, а не на ребенка этого элемента.

Вместо:

console.log(sub.scrollTop); 

Try:

console.log(wrap.scrollTop);