使用scrollTop检测滚动

Question

我想记录用户滚动包装的程度。

以下代码不起作用。 我想知道我做错了什么，以及如何解决它。谢谢！

const content = document.getElementById('content') 
const wrapper = document.getElementById('wrapper').addEventListener('scroll',() => { 
    console.log(content.scrollTop) 
})

#wrapper { 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 250px; 
 
    overflow: auto; 
 
} 
 

#content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: orange; 
 
    width: 50px; 
 
    height: 500px; 
 
}

<div id="wrapper"> 
 
    <div id="content"></div> 
 
</div>

Answer 1

它不是content.scrollTop，但wrapper.scrollTop。

Answer 2

获取匹配元素集中第一个元素的滚动条的当前垂直位置或为每个匹配元素设置滚动条的垂直位置。

scrollTop()：垂直滚动位置与在可滚动区域上方隐藏的像素数量相同。如果滚动条是在最高层，或者如果元素不是滚动的，这个数目将是0。

$('#wrapper').scroll(function() { 
 
    console.log($(this).scrollTop()); 
 
});

#wrapper { 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 250px; 
 
    overflow: auto; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: orange; 
 
    width: 50px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="content"></div> 
 
</div>