代码之家  ›  专栏  ›  技术社区  ›  morgancodes

当滚动条移动时jquery.scrolltop()不更新

  •  1
  • morgancodes  · 技术社区  · 14 年前

    我正在使用jquery.scrolltop()获取滚动条的位置。我正在尝试创建一个动画,它将向用户指示它们在内容列表中的位置。它是一个名字列表,当用户滚动到Q上时,我想在列表上有一个很大的“Q”悬停。

    似乎只有在我停止移动滚动条后,scrolltop()才会给出准确的信息。当我实际移动滚动条时,它不反映位置。

    domElement.scrolltop在浏览器中是否可靠?为什么滚动条移动时jquery.scrolltop不更新?

    2 回复  |  直到 14 年前
        1
  •  1
  •   treeface    14 年前

    它似乎对我有用: http://jsfiddle.net/nPqez/

    这是用于使其工作的代码:

    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;
    }​
    
        2
  •  2
  •   Ender    14 年前

    尝试附加 scroll() 事件到窗口并从那里测试它。

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

    下面是一个工作演示: http://jsfiddle.net/LydQE/