スクロールすると、要素の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); 

試してみてください。

console.log(wrap.scrollTop);