Question

我正在使用jQuery.scrollTop（）来获取滚动条的位置。我正在尝试创建一个动画，它将向用户指示它们在内容列表中的位置。这是一个名单列表，当用户滚动Q等时，我想让一个大的“Q”悬停在列表上。

似乎scrollTop（）仅在我停止移动滚动条后才提供准确的信息。当我实际移动滚动条时，它不会反映位置。

domElement.scrollTop在浏览器中可靠吗？为什么在滚动条移动时jquery.scrollTop不会更新？

Answer 1

尝试攻击scroll()事件到窗口并在其中进行测试。

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

这是一个有效的演示：http://jsfiddle.net/LydQE/

Answer 2

这似乎对我有用：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;
}

滚动条移动时jQuery.scrollTop（）不会更新

2 个答案: