计算用户从页面顶部或页面左侧滚动的距离

Question

可以使用JavaScript创建一个计数器，显示用户从页面顶部滚动的距离，或者它们从页面左侧滚动了多远？

这是我尝试过的代码的小提琴，但是当我滚动时它不算数。

http://jsfiddle.net/cz9zG/

这是我正在使用的HTML，CSS和JavaScript，我试图在不使用jQuery的scrollTop函数的情况下解决这个问题。

HTML：

<p> 
  Distance from top = <span id="windowTop"></span>
  <br/>
  Distance from left = <span id="windowLeft"></span>
</p>

CSS：

body {height:2000px; width:2000px;}
p {position:fixed;}

JavaScript的：

var top = window.pageYOffset || document.documentElement.scrollTop;

var left = window.pageXOffset || document.documentElement.scrollLeft;

window.onscroll = function() {
  document.querySelector('#windowTop').innerHTML = top;
  document.querySelector('#windowLeft').innerHTML = left;
}

Answer 1

将top和left声明移动到onscroll函数中：

window.onscroll = function() {

var top = window.pageYOffset || document.documentElement.scrollTop;

var left = window.pageXOffset || document.documentElement.scrollLeft;

...

}