스크롤 할 때 요소의 scrollTop 속성이 0 인 이유는 무엇입니까?

Question

프로젝트에서 scrollTop 속성을 사용하려고합니다.

하지만 내가하는 일은 중요하지 않습니다. 항상 0을 반환합니다. 크롬으로 작업했습니다. 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

속성은 실제 스크롤 요소 인 .wrap에서 읽어야하며 해당 요소의 하위 요소는 읽지 않아야합니다.

대신 :

console.log(sub.scrollTop); 

시도 :

console.log(wrap.scrollTop);