jquery scrolltop()返回上一个滚动位置的值

Question

我使用jquery函数element.scrollTop()来使用以下行获取页面的当前滚动位置：

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

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

（1：当代码第一次运行时，还没有移动）

delta:0

累计增量：0

函数调用计数：0

currentScrollPosition：0

（delta给出滚动量，accumulateDelta给出滚动总量，functionCallCount是滚动次数，currentScrollPosition是scrolltop（）返回的值）

（2：滚动一点时）

Δ：-120

累计增量：-120

函数调用计数：1

currentScrollPosition：0

（请注意，currentScrollPosition仍未更新）

（3：进一步滚动时）

Δ：-120

累计增量：-240

函数调用计数：2

currentScroll位置：90.90908893868948

（此处，累积增量是迄今为止进行的总滚动量的相加，将加倍，currentScrollPosition将首次更新）

（4：再滚动一点时）

Δ：-120

累计增量：-360

函数调用计数：3

currentScroll位置：181.81817787737896

（现在，累积增量增加了三倍，而当前滚动位置增加了一倍。因此，这是两次滚动后的值，但在三次滚动后更新）

我很抱歉问了这么长的问题，否则我很难问。我想知道为什么会发生这种情况，如果我应该以其他方式使用这个函数，还有其他方法可以替代这个函数。

document.addEventListener("mousewheel", MouseWheelHandler);
var cumulativeDelta = 0,
  functionCallCount = 0;
function MouseWheelHandler(e) {
  e = window.event || e; // 'event' with old IE support
  var delta = e.wheelDelta || -e.detail; // get delta value
  cumulativeDelta += delta;
  functionCallCount += 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;
}

body {
  height: 2000px;
  border: solid red 3px;
}
.normalPart {
  border: solid green 2px;
  height: 900px;
}
.stationary {
  position: fixed;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="stationary">
  <div id="info1"></div>
  <div id="info2"></div>
  <div id="info3"></div>
  <div id="info4"></div>
</div>

Answer 1

问题是因为鼠标滚轮移动开始时会触发鼠标滚轮事件。您在更新发生之前的点读取scrollTop。鼠标滚轮滚动完成后，您需要使用计时器来获取scrollTop。试试这个：

document.addEventListener("mousewheel", MouseWheelHandler);
var cumulativeDelta = 0,
    functionCallCount = 0,
    currentScrollPosition = 0;
function MouseWheelHandler(e) {
    e = window.event || e; // 'event' with old IE support
    var delta = e.wheelDelta || -e.detail; // get delta value
    cumulativeDelta += delta;
    functionCallCount += 1;
    setTimeout(function() {
        currentScrollPosition = $(window).scrollTop();
        document.getElementById("info4").innerHTML = "currentScrollPosition:" + currentScrollPosition;
    }, 200); // update currentScrollPos 200ms after event fires
    document.getElementById("info1").innerHTML = "delta:" + delta;
    document.getElementById("info2").innerHTML = "cumulativeDelta:" + cumulativeDelta;
    document.getElementById("info3").innerHTML = "functionCallCount:" + functionCallCount;
}

body {
  height: 2000px;
  border: solid red 3px;
}
.normalPart {
  border: solid green 2px;
  height: 900px;
}
.stationary {
  position: fixed;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="stationary">
  <div id="info1"></div>
  <div id="info2"></div>
  <div id="info3"></div>
  <div id="info4"></div>
</div>

或者，您可以直接在窗口的滚动事件上读取currentScrollTop位置，因为它将始终与其当前位置同步。

Answer 2

我会监听scroll事件，而不是wheel。更新scrollTop值后，滚动激活。

target.onscroll = functionRef

这里的伟大例子