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

Question

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

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

但它始终是 return 上一个滚动位置的值。请检查下面的代码（与 in here 相同）。 正如您可以自己尝试并在代码中看到的那样，每次滚动后，我们都会得到以下一系列值：

(1:当代码是第一个运行并且还没有移动时)

增量：0

累积增量：0

functionCallCount:0

currentScrollPosition:0

（delta 给出滚动量，cumulativeDelta 给出滚动总量，functionCallCount 是你滚动了多少次，currentScrollPosition 是值 returned by scrolltop() )

(2:滚动一点时)

增量：-120

累积增量：-120

functionCallCount:1

currentScrollPosition:0

（这里注意，currentScrollPosition还是没有更新）

（3：再滚动一点）

增量：-120

累积增量：-240

functionCallCount:2

currentScrollPosition:90.90908893868948

（这里，cumulativeDelta，它是到目前为止所做的总滚动的加法，加倍，currentScrollPosition 是第一次更新）

(4: 当滚动多一点时)

增量：-120

累积增量：-360

functionCallCount:3

currentScrollPosition:181.81817787737896

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

我很抱歉这个问题太长了，否则就很难问了。我想知道为什么会发生这种情况，如果我应该以其他方式使用此功能，则可以使用此功能的任何替代方法。

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>

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

Answer 2

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

target.onscroll = functionRef

很好的例子here