jQuery检测用户何时滚动到列表顶部

Question

I have dynamical list

<div id="content" class="content" data-role="content" data-scroll="y">
    <div id="myDiv">
        <form>
            <ul id="myList" data-role="listview">
            </ul>
        </form>
    </div>
</div>

And I want to append another list to myList , when you scrolled it to the top; How can I detect when user scrolled it to the top?

I tried some variants of scrollTop function, like:

  $(window).bind('scrollstop', function(){
    alert("1 "+$(window).scrollTop());  
    alert("2 "+$('#content').scrollTop()); 
    alert("3 "+$('#myDiv').scrollTop()); 
    alert("4 "+$('#myList').scrollTop()); 
    alert("5 "+$('#myList li').scrollTop()); 
});

but all of them returned 0 :(

Answer 1

You need to attach the scroll event to the element being scrolled. Assuming you are scrolling the #content element this will work:

$('#content').on('scroll', function(){
    if ($(this).scrollTop() == 0) {
        alert('at the top');
    }
});

Example fiddle