jQuery.scrollTop() doesn't update while the scrollbar is moving

Question

I'm using jQuery.scrollTop() to get the position of a scroll bar. I'm trying to create an animation which will indicate to a user where they are in a list of content. It's a list of names, and I want to have a big "Q" hovering over the list as the user scrolls over the Q's, etc.

It seems that scrollTop() gives accurate information only after I've stopped moving the scrollbar. It doesn't reflect the position while I'm actually moving the scrollbar.

Is domElement.scrollTop reliable across browsers? Why doesn't jquery.scrollTop update while the scrollbar is moving?

Answer 1

Try attaching the scroll() event to the window and testing it from withing there.

$(window).scroll(function() {
        //$(window).scrollTop() is accurate and updated while scrolling
});

Here's a working demo of this: http://jsfiddle.net/LydQE/

Answer 2

It seems to work for me: http://jsfiddle.net/nPqez/

This is the code used to make it work:

HTML:

<div id="test">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
</div>

<div id="message">
Current scroll position: 0
</div>​

JS:

$('#test').scroll(function() {
    $('#message').text("Current scroll position: " + $(this).scrollTop());
});​

CSS:

#test {
    height:200px;
    border:1px solid silver;
    border-radius:5px;
    overflow:scroll;
    margin-top:20px;
}​