Javascript jquery scrolltop（）返回上一个滚动位置的值

我正在使用jquery函数

element.scrollTop（）

通过以下行获取页面的当前滚动位置：

var currentScrollPosition=  $('html').scrollTop() || $('body').scrollTop();

但它总是返回上一个滚动位置的值。请检查下面的代码（与is相同）。 正如您可以自己尝试并在代码中看到的，在每个小滚动之后，我们会得到以下一系列值：

（1：当代码首次运行且尚未移动时）

增量：0

累积折旧：0

functionCallCount:0

当前位置：0

（delta表示滚动的次数，cumulativeDelta表示滚动的总量，functionCallCount表示滚动的次数，currentScrollPosition表示scrolltop（）返回的值）

（2：滚动一点时）

增量：-120

累计折旧额：-120

函数调用计数：1

当前位置：0

（注意，currentScrollPosition仍未更新）

（3：再滚动一点时）

增量：-120

累计折旧：-240

函数调用计数：2

当前滚动位置：90.90908893868948

（这里，累计edelta是迄今为止所做的总滚动的总和，它增加了一倍，currentScrollPosition第一次更新）

（4：再滚动一点时）

增量：-120

累计折旧：-360

函数调用计数：3

当前滚动位置：181.81817787737896

（现在，当currentScrollPosition加倍时，cumulativeDelta增加了三倍。因此，这是两次滚动后的值，但在第3次滚动后更新）

我很抱歉提出了这么长的问题，但如果不是这样的话，就很难问了。我想知道为什么会发生这种情况，如果我应该以其他方式使用这个函数，这个函数还有其他选择

document.addEventListener（“鼠标滚轮”，鼠标滚轮处理器）；
var cumulativeDelta=0，
functionCallCount=0；
功能MouseWheelHandler（e）{
e=window.event | | e；/“event”与旧IE支持
var delta=e.wheeldta | |-e.detail；//获取delta值
累积增量=增量；
函数callcount+=1；
currentScrollPosition=$（'html'）.scrollTop（）| |$（'body'）.scrollTop（）；
document.getElementById（“info1”）.innerHTML=“delta:”+delta；
document.getElementById（“info2”）.innerHTML=“cumulativeDelta:”+cumulativeDelta；
document.getElementById（“info3”）.innerHTML=“functionCallCount:”+functionCallCount；
document.getElementById（“info4”）.innerHTML=“currentScrollPosition:”+currentScrollPosition；
}

正文{
高度：2000px；
边框：纯红3px；
}
.正常部分{
边框：纯绿2px；
高度：900px；
}
.固定的{
位置：固定；
顶部：0px；
}

---

问题是因为鼠标滚轮移动开始时会触发鼠标滚轮事件。您正在更新之前读取

scrollTop

。鼠标滚轮滚动完成后，您需要使用计时器来获取

滚动条。试试这个：


document.addEventListener（“鼠标滚轮”，鼠标滚轮处理器）；
var cumulativeDelta=0，
functionCallCount=0，
currentScrollPosition=0；
功能MouseWheelHandler（e）{
e=window.event | | e；/“event”与旧IE支持
var delta=e.wheeldta | |-e.detail；//获取delta值
累积增量=增量；
函数callcount+=1；
setTimeout（函数（）{
currentScrollPosition=$（窗口）.scrollTop（）；
document.getElementById（“info4”）.innerHTML=“currentScrollPosition:”+currentScrollPosition；
}，200）；//在事件激发后200ms更新currentScrollPos
document.getElementById（“info1”）.innerHTML=“delta:”+delta；
document.getElementById（“info2”）.innerHTML=“cumulativeDelta:”+cumulativeDelta；
document.getElementById（“info3”）.innerHTML=“functionCallCount:”+functionCallCount；
}
正文{
高度：2000px；
边框：纯红3px；
}
.正常部分{
边框：纯绿2px；
高度：900px；
}
.固定的{
位置：固定；
顶部：0px；
}
我会监听
滚动
事件，而不是
滚轮
。更新
scrollTop
值后，Scroll将激活

target.onscroll=functionRef

很好的例子
太棒了！正是我想要的：）。。。也有解释。谢谢你快速准确的回复。。将尝试并实施此功能。没问题，很乐意提供帮助。只是想知道，选择200ms有什么特别的原因吗？我尝试用更少的时间，得到了不同的currentScrollPosition值。50毫秒的延迟导致约0.09秒，而100毫秒的延迟导致0.6秒。实际结果应为0.90-0.95。因此，滚动过程似乎需要大约200毫秒才能完成。实际上，我想在这个计算之后运行更多的代码。我想在一个特定的滚动值之后，鼠标滚轮滚动应该会导致水平滚动，而其他一些值会恢复正常滚动。但是增加延迟并不能使它成为实时的。你能建议点什么吗？如果你降低延迟，卷轴的动画仍将进行，因此你会看到不同的值。我使用了200毫秒，因为这似乎是过渡结束的最低但最可靠的时间。如果要实时检查实际滚动位置，请直接挂接到窗口的
scroll
事件。yupp。。这大大简化了工作。。再次非常感谢：）。。只是好奇。。在这种方法中，浏览器的工作方式如何不同？？