jQuery scrolltop()返回上一个滚动位置的值 [英] jquery scrolltop() returns value of previous scroll position

问题描述

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

I am using jquery function element.scrollTop() to get the current scroll position of the page using following line:

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

但是它总是返回上一个滚动位置的值.请检查下面的代码(与在此处相同). 正如您可以尝试并在代码中看到的那样，每次小滚动之后，我们都会得到以下一系列值:

But it always return a value of previous scroll position. Please check the code below (which is same as is in here). As you can try yourself and see in the code, after each tiny scroll, we get following series of values:

(1:首次运行代码且尚未执行任何操作)

delta:0

cumulativeDelta:0

cumulativeDelta:0

functionCallCount:0

functionCallCount:0

currentScrollPosition:0

currentScrollPosition:0

(delta给出了滚动的数量，cumulativeDelta给出了滚动的总量，functionCallCount是您滚动了多少次，currentScrollPosition是scrolltop()返回的值)

(2:稍微滚动一下)

增量:-120

cumulativeDelta:-120

cumulativeDelta:-120

functionCallCount:1

functionCallCount:1

currentScrollPosition:0

currentScrollPosition:0

(请注意，currentScrollPosition仍未更新)

(3:进一步滚动时)

增量:-120

cumulativeDelta:-240

cumulativeDelta:-240

functionCallCount:2

functionCallCount:2

currentScrollPosition:90.90908893868948

currentScrollPosition:90.90908893868948

(此处，到目前为止累积的总滚动的累加cumulativeDelta被加倍，并且currentScrollPosition首次更新)

(4:再滚动一点)

增量:-120

cumulativeDelta:-360

cumulativeDelta:-360

functionCallCount:3

functionCallCount:3

currentScrollPosition:181.81817787737896

currentScrollPosition:181.81817787737896

(现在，currentScrollPosition增加一倍时，cumulativeDelta会增加三倍.因此，这是两次滚动后的值，但更新后会滚动3次)

我为很长的问题道歉，但否则很难提出.我想知道为什么会这样，如果我应该以其他方式使用此功能，则该功能还有其他选择.

I apologize for long question, but would have been difficult to ask otherwise. I would like to know why is this happening and if I should use this function some other way there are any alternative to this function.

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>

推荐答案

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

The issue is because the mousewheel event fires when the mousewheel movement starts. You are reading the scrollTop at the point before the update has happened. You need to use a timer to get the scrollTop after the mouse wheel scroll has finished. Try this:

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位置，因为该位置将始终与其当前位置保持同步.

Alternatively you could read the currentScrollTop position directly on the scroll event of the window as that will always be in sync with its current position.

这篇关于jQuery scrolltop()返回上一个滚动位置的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！