为什么滚动时元素的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);