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

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;

...

}