Warum bleibt die Eigenschaft scrollTop des Elements beim Scrollen 0?

Question

Ich versuche, die scrollTop Eigenschaft in einem Projekt zu verwenden.

Aber es ist egal was ich tue: Es gibt mir immer 0 zurück. Ich arbeite mit Chrome. Versuchte auch Firefox mit dem gleichen Ergebnis.

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>

Was ich falsch:

Ich habe diese Demo gemacht?

respektive: Warum bekomme ich diesen offensichtlich falschen Wert zurück? Ich würde etwa 800 erwarten, wenn es bis zum Ende gescrollt wird.

Answer 1

Die Eigenschaft scrollTop sollte in Ihrem Fall aus dem aktuellen Scrolling-Element .wrap gelesen werden, kein untergeordnetes Element dieses Elements.

Statt:

console.log(sub.scrollTop); 

Versuchen:

console.log(wrap.scrollTop);