jquery scroll ()返回以前滚动位置的值

Question

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

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

但它总是返回以前滚动位置的值。请检查下面的代码(与在这里相同)。正如您可以尝试并在代码中看到的那样，在每个微小的滚动之后，我们将得到以下一系列值：

(1:当代码第一次运行且尚未移动时)

三角洲:0

累积三角洲:0

功能来电数:0

当前滚动位置:0

(delta表示滚动量，cumulativeDelta表示滚动总量，functionCallCount表示滚动次数，currentScrollPosition表示滚动顶()返回的值)

(2:滚动一点)

达美航空：-120

累积三角洲：-120

功能来电数:1

当前滚动位置:0

(请注意，currentScrollPosition仍未更新)

(3:进一步滚动时)

达美航空：-120

累积三角洲：-240

功能来电数:2

当前滚动位置:90.90908893868948

(在这里，cumulativeDelta是迄今为止所做的总滚动的加载项，它是加倍的，currentScrollPosition是第一次更新)

(4:再滚动一点)

达美航空：-120

累积三角洲：-360

功能来电数:3

当前滚动位置: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>

​

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

Answer 2

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

target.onscroll = functionRef

很好的例子这里